Question

如果块是文本，那将很容易。但块是图像......

Answer 1

指定高度等于容器的行高和图像的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/

其中，一个更好的解决方案是第三种方法：

在内容元素上方插入div。这将设置为高度：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代码：

＆lt; div class =“zxx_align_box_5 fix”＆gt; ＆lt; a href =“＃”＆gt; ＆lt; img src =“http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg”/＆gt;＆lt; / a＆gt;＆lt; a href =“＃”＆gt;＆lt; img src =“http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg”/＆gt;＆lt; / a＆gt;＆lt; / div＆gt;

css：

.zxx_align_box_5 a {display：inline-block;宽度：1.2em;字体大小：128像素;文本对齐：中心; vertical-align：middle;} .zxx_align_box_5一个img {vertical-align：middle;填充：2px的; border：1px solid #beceeb;}

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

3 个答案: