web-dev-qa-db-ja.com

画像の下にテキストを直接配置するにはどうすればよいですか？

私は、画像を上に配置し、画像の下のテキストを画像の幅の境界内に収まるように揃える方法を知っていました。ただし、これを行う方法がわかりません。これはどのように達成されますか？

htmlcsstextjustify
38
Andie

あなたのHTML：

<div class="img-with-text">
    <img src="yourimage.jpg" alt="sometext" />
    <p>Some text</p>
</div>

画像の幅がわかっている場合、CSSは次のことを行います。

.img-with-text {
    text-align: justify;
    width: [width of img];
}

.img-with-text img {
    display: block;
    margin: 0 auto;
}

そうしないと、画像の下のテキストが自由に流れます。これを防ぐには、コンテナに幅を設定するだけです。

55
Jason

HTML5を使用できます<figcaption>：

<figure>
  <img src="img.jpg" alt="my img"/>
  <figcaption> Your text </figcaption>
</figure>

実施例 。

40
Majid

テキストを正当化するには、画像の幅を知る必要があります。画像の通常の幅を使用することも、別の幅を使用することもできますが、IE 6はスケーリングせずに不機嫌になるかもしれません。

必要なものは次のとおりです。

<style type="text/css">
#container { width: 100px; //whatever width you want }

#image {width: 100%; //fill up whole div }

#text { text-align: justify; }    
</style>

 <div id="container"> 
     <img src="" id="image" /> 
     <p id="text">oooh look! text!</p> 
 </div>
4
Gordon Gustafson

これにより、画像の下に「A」が中央に配置されます。

<div style="text-align:center">
  <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
  <br />
  A
</div>

それはASP.Netであり、HTMLを次のようにレンダリングします。

<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>
2
JBrooks