如何将中间图像居中？

Question

我无法将中间图像居中...尝试保证金：0自动，尝试内联阻止等等我忘记了什么？

需要一个适用于所有浏览器的解决方案。

JS小提琴：

http://jsfiddle.net/NuFtA/3/

这是css：

.class2{
margin-left: auto;
margin-right: auto;
}

.class3{
float:right;

Answer 1

如果您可以将HTML重新排列为：

<img src="http://placehold.it/350x400" class="class1" width="100" />
<img src="http://placehold.it/350x400" class="class3" width="100" />
<img src="http://placehold.it/350x400" class="class2" width="100" />

然后这个CSS会这样做：

.class1 {
    float:left;
}
.class2 {
    margin-left: auto;
    margin-right: auto;
    width:100px;
    display:block;
}
.class3 {
    float:right;
}

<强> jsFiddle example

Answer 2

JSFIDDLE

<强> HTML

<div class="image_container">
    <img src="http://placehold.it/350x400" class="image class1" />
    <img src="http://placehold.it/350x400" class="image class2" />
    <img src="http://placehold.it/350x400" class="image class3" />
</div>

<强> CSS

.image_container {
    position: relative;
    text-align: center;
}

.image {
    position: absolute;
    width: 100px;
}

.class1{
    left: 0;
}

.class2{
    margin-left: -50px; /* Half of the image's width*/
}

.class3{
    right: 0;
}