IMG src两个图像对齐div中心

Question

<div class="box">
        <img src="http://s21.postimg.org/c5lw89577/Untitled_2.jpg" />
        <img src="http://s21.postimg.org/c5lw89577/Untitled_2.jpg" />
        <p>
            uspendisse potenti. Ut id justo libero, in bibes 
        </p>
  </div>

jsfiddle sample

如何使图像src对齐居中。我想得到的结果是喜欢下面的图片。理想情况下也适用于IE7和IE8

Answer 1

HTML <img>元素是内联级元素，因此它们受text-align属性的影响。

段落是块级元素，因此它们不会环绕图像，除非您使用CSS来更改它。所有你需要的是：（http://jsfiddle.net/7sKeA/）

.box {
    width:600px;
    text-align:center;
}
img {
    margin:5px;
}

如果您还需要.box保持居中，请使用margin:auto;进行定位：（http://jsfiddle.net/7sKeA/1/）

.box {
    width:600px;
    text-align:center; /* center align the text inside the box */
    margin:auto; /* center this .box element, assuming it is block-level */
}
img {
    margin:5px;
}

Answer 2

将它们放在居中的块元素中。

<div style="text-align: center;">
    <img src="http://s21.postimg.org/c5lw89577/Untitled_2.jpg" />
    <img src="http://s21.postimg.org/c5lw89577/Untitled_2.jpg" />
</div>

http://jsfiddle.net/ExplosionPIlls/CjZSS/2/

Answer 3

我建议给图片一个容器div并将text-align:center应用于该div。 另外，从图像中删除display:block以使它们保持在一行上。

div.images {
    position:relative;
    text-align:center;
}

http://jsfiddle.net/CjZSS/3/

Answer 4

过去我遇到过类似的问题 - <p align=center><img src="img/test.jpg"></p>
为我工作。