0

順序付けられていないリストに画像を含む div が含まれるドキュメント構造があります。div の高さはすべて 150px に設定されていますが、一部の画像はたまたまそれよりも小さくなっています。CSS で画像を div 自体に垂直に配置する方法はありますか。

JSFIDDLE: http://jsfiddle.net/xQ7pJ/

私のHTML：

<ul>
    <li>
        <div>
            <img src=""/>
        </div>
    </li>
</ul>

ありがとう。

4

2 に答える 2

0

はい、

<img src="" style="vertical-align:middle;"/>

垂直方向の配置プロパティは、"Text-top" に設定することもできます

詳細はこちら

于 2013-09-25T17:33:18.290 に答える
0

これを行う最も簡単な方法は、画像を背景画像としてdivそれ自体に適用し、背景位置を 50% + リピートなしに設定することです。

<ul>
    <li>
        <div style="background: url(http://bestvaluesupply.devsiteonline.com/ProdImages/SEY%2098-50-1.jpg) 50% 50% no-repeat"></div>
    </li>
</ul>

http://jsfiddle.net/sbeliv01/xQ7pJ/2/

ただし、この場合、画像が 150px コンテナーよりも大きい場合、それらの制約で切り取られます。

その方法以外に、IE7 以下を気にする必要がなく、 内にその 1 つの画像のみを表示する予定があるdiv場合は、 をに設定してdivから.display: table-cellvertical-align: middle; text-align: center;

ul li div { display: table-cell; vertical-align: middle; text-align: center; }

http://jsfiddle.net/sbeliv01/xQ7pJ/3/

于 2013-09-25T17:50:56.543 に答える