如何居中该图像？

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; 
}