2

CSS ボックス内のテキストと画像を垂直方向に揃えたいと思います。

私はいくつかの方法を試しましたが、これは私が最後に試した「display:table-cell-method」のコードです

<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img src="images/stopwatch-button-play.png">
</div>

これは、最新バージョンの Firefox での結果のスクリーンショットです: http://screencast.com/t/Yzg2MzAzNW

画像は正しく中央に配置されていますが、テキストはほぼ正しく中央に配置されています。画像のベースラインに位置します。なんで？

4

4 に答える 4

4

垂直方向の配置は完全に誤解されています。これを読んだことがありますか？

画像のベースラインにテキスト サイトがある理由は、画像とテキストの両方が div の流れの中にあるためです。それらは重なりません。テキストも中央に配置するには (画像の上にあることを意味します)、テキストを adivまたは aspanに配置し、その位置を調整する必要があります (相対的に設定し、左と上で実験します)。

乾杯

于 2009-12-29T14:18:41.673 に答える
3

以下を変更

<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img style="vertical-align:middle" src="images/stopwatch-button-play.png">
</div>
于 2009-12-29T14:36:19.127 に答える
0

background-position プロパティを使用できます。

このように見えます。

background: url(パス/to/image.whatever) トップ; // 上に揃えます。

top leftなどのようなこともできますtop right。

w3schoolsには、バックグラウンドについて知っておくべきことがすべて揃っています。

于 2009-12-29T14:19:04.653 に答える
0

テキストの高さが 1 行しかない場合は、line-height を画像の高さに設定できます。テキストを垂直方向に中央揃えにします。次に、画像の position:absolute を使用すると、div 内のテキストの配置が乱れるのを防ぐことができます。

<div style="border-color:blue; height:200px; ">
<div style="line-height:30px;margin-top:85px">2:38<img style="position:absolute" src="images/stopwatch-button-play.png"></div>
</div>
于 2009-12-29T14:37:05.783 に答える