html - 在父 div 中居中图像元素

Question

如何在父 div 中设置居中图像元素？我想这样做，以便图像的中间始终位于他 parent 的中心。此外，我希望图像始终具有 100% 的高度(注意:我不想拉伸(stretch)图像宽度)。

示例见此处:http://jsfiddle.net/Ex5ax/5/

<div class="box">
  <img src='featured.jpg' />
</div>

CSS:

.box { height: 100%; width: 450px; border: 2px solid red; background: green; overflow: hidden; }
.box img { height: 100%; width: auto; text-align: center; }

Answer 1

添加text-align: center;向父级声明 CSS .box而不是 child .box img .

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden;
    text-align: center;  /* align center all inline elements */
}

这是 Fiddle .

更新

似乎还有一个5px图像下方的空隙，属于行高保留字符。从 <img> 等内联元素中删除它你可以使用 vertical-align: bottom :

.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* <-- fix the vertical gap */
}

JSFiddle Demo #2