Question

我需要至少水平地居中图像，而不使用表格，并且至少可以在Internet Explorer 8上使用。（如果可能，也可以使用Internet Explorer 7）。

我需要一个类似于之前在Stack Overflow上提出的问题的解决方案， Center an image inside a div? ，但是使用表来做这个，这是不可接受的解决方案。

我尝试使用“margin：0px auto”Fiddle，这适用于所有其他元素，但它不适用于图像。快速代码如下。

HTML

<div class="outer">
    <img src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/195658_100001734379625_1121483775_q.jpg" width="100" height="100" />
</div>

CSS

.outer{
    width:300px;
    border:1px #000 solid;
    padding:5px;
}.outer img{
    border:1px #F00 solid;
    margin:0 auto;
}

是否有任何纯CSS解决方案，如果可能但不一定适用于Internet Explorer 7？

Answer 1

添加text-align：center;进入.outer类。

.outer{
    width:300px;
    border:1px #000 solid;
    padding:5px;
    text-align:center;
}

Answer 2

如果你想垂直和水平居中：

.outer{
    width:300px;
    height: 300px;
    border:1px #000 solid;
    padding:5px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.outer img{
    border:1px #F00 solid;
}

http://jsfiddle.net/M7LJx/1/

注意 display: table-cell不适用于IE7。

Answer 3

只需替换CSS代码：

.outer{
    width:300px;
    border:1px #000 solid;
    padding:5px;
    margin:0 auto;
    text-align: center;
}
.outer img {
    border:1px #F00 solid;
}

适用于所有浏览器。

Answer 4

如果你的img必须显示：block，那么你必须使用margin：0 auto;因为，text-align：center;不适用于块元素。

但是，如果您的img显示：inline; （或未设置，因此默认为内联），然后text-align将起作用。

将图像置于中间

HTML

CSS

4 个答案: