0

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

我需要一个类似于之前在 Stack Overflow 上提出的问题的解决方案，在 div 中居中图像？，但是使用表格来做，这是不可接受的解决方案。

我尝试了一个带有“margin：0px auto”的小提琴，它适用于所有其他元素，但不适用于图像。快速代码如下。

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？

4

4 回答 4

2

添加文本对齐：中心；进入 .outer 类。

.outer{
    width:300px;
    border:1px #000 solid;
    padding:5px;
    text-align:center;
}
于 2012-09-10T12:19:23.883 回答
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/

Note display: table-cell不适用于 IE7。

于 2012-09-10T12:20:49.623 回答
2

只需替换 CSS 代码：

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

它适用于所有浏览器。

于 2012-09-10T12:27:18.103 回答
0

如果你的 img 必须是 display:block，那么你必须使用 margin:0 auto; 因为，文本对齐：中心；不适用于块元素。

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

于 2012-09-10T12:33:50.830 回答