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

Question

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

Answer 1

不使用表格就没有完美的方法，因为不幸的是 vertical-align CSS 属性对内联元素和表格元素做了不同的事情(参见 http://phrogz.net/css/vertical-align/index.html)。

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

其中，比较好的解决方案之一是介绍的第三种方法:

insert a div above the content element. This will be set to height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.

<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;}