如何在div中垂直对齐图像

唯一的（和最好的跨浏览器）的方式，因为我知道是使用

inline-block

height: 100%

vertical-align:middle

因此，有一个解决方案：http :
//jsfiddle.net/kizu/4RPFa/4570/

.frame {    height: 25px;          width: 160px;    border: 1px solid red;    white-space: nowrap;     text-align: center;    margin: 1em 0;}.helper {    display: inline-block;    height: 100%;    vertical-align: middle;}img {    background: #3A6F9A;    vertical-align: middle;    max-height: 25px;    max-width: 160px;}<div >    <span ></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div >    <span ></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div >    <span ></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div >    <span ></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div >    <span ></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div >    <span ></span>    <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div >    <span ></span>    <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div >    <span ></span>    <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div >    <span ></span>    <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div >    <span ></span>    <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div >    <span ></span>    <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div >    <span ></span>    <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div >    <span ></span>    <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

或者，如果您不想在现代浏览器中添加多余的元素并且不介意使用Internet
Explorer表达式，则可以使用伪元素，然后使用方便的表达式将其添加到Internet
Explorer，该表达式每个元素仅运行一次，因此不会有任何性能问题：

通过该解决方案

:before

expression()

.frame {    height: 25px;          width: 160px;    border: 1px solid red;    white-space: nowrap;    text-align: center;    margin: 1em 0;}.frame:before,.frame_before {    content: "";    display: inline-block;    height: 100%;    vertical-align: middle;}img {    background: #3A6F9A;    vertical-align: middle;    max-height: 25px;    max-width: 160px;}.frame {    list-style:none;    behavior: expression(        function(t){ t.insertAdjacentHTML('afterBegin','<span ></span>'); t.runtimeStyle.behavior = 'none';        }(this)    );}<div ><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div ><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

怎么运行的：

1. 当两个

   inline-block

   元素彼此靠近时，可以使彼此的边对齐，这样

   vertical-align: middle

   您将得到如下所示：

1. 当你有固定的高度（在一个块中

   px

   ，

   em

   或另一个绝对值单元），可以设置在内部块的高度

   %

   。

2. 所以，加入一个

   inline-block

   具有

   height: 100%

   与固定高度块将对准另一

   inline-block

   它元素（

   <img/>

   你的情况），垂直接近它。