IMG标签两张图片如何居中对齐到一个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示例

如何使图片的src居中对齐。我想要得到的结果就像下面的图片一样。最好能在IE7和IE8上运行。

- olo

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

- Richard JP Le Guen

---

很好的简化和描述了正在发生的事情。 - showdev

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/

- Explosion Pills

Answer 3

我建议给图片添加一个容器div，并对该div应用text-align:center。同时，删除图片中的display:block以使它们保持在同一行。

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

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

- showdev

Answer 4

我过去也遇到类似的问题，以下代码对我有用：
<p align=center><img src="img/test.jpg"></p>

- priteshbaviskar

---

我相信align属性已经被弃用，现在应该使用CSS样式表。http://fantasai.tripod.com/qref/HTML4/deprecated.html - showdev