2

画像があるとしましょう。

<img src="lala.png" />

この画像にはwidth=400px;.

この画像の下に「Lala」と入力します。

<img src="lala.png" />
<br>
<span>Lala</span>

これらの画像とテキストをデータベースからフェッチすることに注意してください。画像の幅は 400px に固定されていますが、もちろんテキストのサイズはさまざまであるためmargin-left:100px;、テキストを中央にプッシュするために使用することはできません。他のテキストでは正しく表示されないため...

それを行う最良の方法は何ですか？

4

4 に答える 4

2

spanの代わりにdivを使用できます。

HTML：

<div class="underImage">Blah</div>

スタイル：

.underImage {
    width: 400px;
    text-align: center;
}
于 2012-10-25T14:43:46.760 に答える
1

画像とテキストを要素で折り返し、折り返し要素でtext-alignCSS属性を使用するだけです。

HTML

<p class="center-wrapper">
 <img src="lala.png" />
 <br>
 <span>Lala</span>
</p>

CSS

.center-wrapper { text-align: center; }
于 2012-10-25T14:44:29.700 に答える
1

あなたはこれを行うことができますtext-align:center;

<div style="text-align:center;">
<img src="lala.png" />
<br>
<span>Lala</span>
</div>
于 2012-10-25T14:42:30.270 に答える
0

これを実現するにはいくつかの方法がありますが、最も柔軟で効果的な方法は、caption要素内にキャプション テキストを含む 1 セルのテーブルを使用することです。

<table class="image">
<caption align="bottom">caption text</caption>
<tr><td><img ...></td></tr>
</table>

準宗教的な理由でこのような表の使用に反対する人はたくさんいますが、テキストの幅を明示的に設定する必要がないのは依然として柔軟な方法です (画像の幅によって決定されるのとは対照的に)。 ) であり、CSS サポートとは独立して動作します。

于 2012-10-25T15:56:29.863 に答える