html - 将图像居中

Question

我需要在不使用表格的情况下将图像居中，至少水平居中，并且至少可以在 Internet Explorer 8 上运行。(如果可能，也可以在 Internet Explorer 7 上运行)。

我需要一个类似于之前在 Stack Overflow 上提出的问题的解决方案， Center an image inside a div? ，但使用表格来执行此操作，这在此处是 Not Acceptable 解决方案。

我尝试了 Fiddle使用“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？

Answer 1

添加文本对齐:居中；进入.outer类。

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