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

在此处输入图像描述

4

4 回答 4

10

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;
}
于 2013-05-29T22:07:57.363 回答
3

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

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

于 2013-05-29T22:07:41.993 回答
1

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

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

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

于 2013-05-29T22:08:10.163 回答
-1

我过去有类似的问题，这
<p align=center><img src="img/test.jpg"></p>
对我有用。

于 2013-05-29T22:08:16.317 回答