Html 如何将中间图像居中？

我无法将中间图像居中…尝试了边距：0自动，尝试了内联块，等等。我忘记了什么

需要一个能在所有浏览器上运行的解决方案

JS小提琴：

以下是css：

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

.class3{
float:right;

---

如果可以将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" />

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>

---

这就是你想要的吗？谢谢，这很有效，而且比处理文本对齐更好，因为这并不总是适用于所有浏览器。

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

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