css - IMG src 两个图像对齐到 div 中心

标签 css

<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

enter image description here

最佳答案

HTML <img>元素是行内元素,因此它们受 text-align 的影响属性(property)。

段落是 block 级元素,因此除非您使用 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;
}

关于css - IMG src 两个图像对齐到 div 中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16824660/

相关文章:

javascript - 如何检查元素ID是否在文档中?

css - 如何使用 title~= 必须包含空格的 CSS 属性选择器?

javascript - 从 String jQuery 中获取 CSS 属性/规则

html - 如何在非 anchor 文本下划线?

html - div 位于它应该在的位置下方约 50px

html - 仅使用 CSS 激活悬停事件图标时显示菜单

CSS 将 div 宽度调整为最大 X 像素的文本内容宽度

html - IE 中的 float 未正确对齐

css - 使用框阴影插入时如何将边框底部设置为无?

html - 添加并排 div 困惑