如何使高度不确定的图片相对于固定容器垂直对齐

Question

如果块是文本，那会很容易。但是块是图像en……

Answer 1

指定容器的高度等于line-height，并指定图像上的vertical-align：middle。

.container {
   height:5em;
   line-height:5em;
   text-align:center;
}
.container img {
   vertical-align:middle;
}

<div class="container">
   <img src="exemple.jpg" alt="exemple" />
</div>

无桌和跨浏览器！

Answer 2

没有表就没有完美的方法，因为遗憾的是，vertical-align CSS属性对内联元素和表元素有不同的作用（请参阅http://phrogz.net/css/vertical-align/index.html ）。

可以在此处找到几种解决方案，并讨论了具体的优缺点： http : //blog.themeforest.net/tutorials/vertical-centering-with-css/

其中，较好的解决方案之一是提出的第三种方法：

在content元素上方插入div。 它将被设置为height：50％; 和margin-bottom：-contentheight;。 然后，内容将清除浮点数并最终位于中间。

<div id="floater">
<div id="content">
    <img src="my-image.png"/>
</div>
</div>

#floater    {float:left; height:50%; margin-bottom:-120px;}
#content    {clear:both; height:240px; position:relative;}

Answer 3

html代码：

<div class =“ zxx_align_box_5修复”> <a href="#"> <img src =“ http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg” /> </a> <a href="#"> <img src =“ http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg” /> </a> </ div>

CSS：

.zxx_align_box_5 a {display：inline-block; 宽度：1.2em; font-size：128px; text-align：center; .zxx_align_box_5 img {vertical-align：middle; padding：2px; border：1px solid #beceeb;}