垂直对齐图像

Question

我有一个文档结构，其中无序列表包含带有图像的div。 div都有150px的设置高度，但有些图像恰好小于那个。 CSS中是否有一种方法可以将图像垂直放置在div本身内。

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

我的HTML：

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

感谢。

Answer 1

是的，

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

垂直对齐属性也可以设置为“文本顶部”

更多信息here

Answer 2

最简单的方法是将图像作为背景图像应用于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或更少，并且您只打算在div中显示该单个图像，那么您可以将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/