如何使高度不確定的圖片相對於固定容器垂直對齊

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