0

ここに私がこれまでに試したDEMOがあります。

私が必要とするのは、テキストを div の正確な上部にプッシュして、画像の上部の配置と一致するようにすることです。

画像とテキストの両方を 1 行のように正確に配置したいのですが、テキストの上部に完全に配置されていない小さなスペースが表示されます。

HTML

<div class="wrap"> 
    <div class="image"><img src="" /></div>
    <div class="content">Lorem ipsum</div>
</div>

CSS

.wrap{background:grey}
.image{display:table-cell; vertical-align:top}
.content{display:table-cell; vertical-align:top; font-size:24px}

http://jsfiddle.net/s38Uv/20/

4

1 に答える 1

0

上に垂直に揃える必要はありません。これがデフォルトの動作です。display:table-cell

ギャップがあるのは、行の高さがテキストの周りの仮想ボックスとまったく同じではないためです。違いはフォント自体に依存します。Explorer 7 以降で作業している場合は、テキストをdisplay:inline-blockに設定できますmargin-top: -0.Xem。X は任意の数字です。もちろん、マージントップをピクセルで設定することもできます。

于 2013-02-08T11:00:30.183 に答える