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

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

指定高度等于容器的行高度，并在图像上垂直对齐：中间

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

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

---

无表和跨浏览器

在不使用表的情况下，这不是一个完美的方法，因为垂直对齐CSS属性不幸地对内联元素和表元素做了不同的事情，请参见

下面可以找到几种解决方案，其中讨论了具体的赞成和反对意见：

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

在内容元素上方插入一个div。这将设置为高度：50%；和页边距底部：-contentheight；。然后，内容将清除浮点，并在中间结束。

html代码：

css：

---

.zxx_align_box_5 a{display:inline block；width:1.2em；font size:128px；text align:center；vertical align:middle；}.zxx_align_box_5 a img{vertical align:middle；padding:2px；border:1px solid beceeb；}

恐怕这种方法只适用于文本块

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