父div中的中心图像元素

Question

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

请看这里的例子: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而不是子级.box img.

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

这是小提琴.

更新

看来5px图像下面还有一个空隙,它属于行高保留字符.要从内联元素中删除它,<img>您可以使用vertical-align: bottom:

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

JSFiddle演示#2

Answer 2

您需要将text-align: center;图像的 CSS 移至其父 div 的 CSS，因此您的 CSS 如下所示：

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

.box img {
    height: 100%;
    width: auto;
}

就是这样！