html - 垂直对齐图像

Question

我有一个文档结构，其中无序列表包含带有图像的 div。div 的高度都设置为 150 像素，但有些图像恰好比这小。CSS中有没有办法在div本身中垂直定位图像。

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

我的 HTML：

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

谢谢。

Answer 1

最简单的方法是将图像应用为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 容器，那么它将在这些约束下被截断。

div除了这种方法，如果您不需要担心 IE7 或更低版本，并且只div打算display: table-cell在vertical-align: middle; text-align: center;.

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

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

Answer 2

是的，

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

垂直对齐属性也可以设置为“Text-top”

更多信息在这里