将动态内容提供的 div 居中答案

【问题标题】：Centering a div fed by dynamic content将动态内容提供的 div 居中
【发布时间】：2014-10-25 03:32:32
【问题描述】：

所以，我有这个：

<div>
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>

我希望它与浏览器窗口水平居中，即使我在 div 中插入更多图像。（所以，没有固定宽度的 div 大小）我找到的解决方案是div{text-align: center;}，但这似乎不对，因为 img 标签不是文本。

还有其他解决办法吗？

【问题讨论】：

不，应该是对的。如果您喜欢冒险，请使用 margins-img{left:50%;margin-left:-x} 其中 -x = img 宽度的一半，负数。
否则将 div 居中。使用div{margin: 0 auto;}
div{text-align: center;} 使图像居中...
text-align 影响display: inline（文本）和display: block（默认图像）的所有元素，除此之外。因此，除非您对图像执行 display: block; float: left 之类的操作，否则它应该可以正常工作。
@MildlySerious img 默认为 display:inline-block。只有在这种情况下，它才会被视为 inline 块 - 与文本的单个字形相同。

标签： html css

【解决方案1】：

将您的 HTML 更改为：

 <div class="container">
     <img src="img1.jpg">
     <img src="img2.jpg">
     <img src="img1.jpg">
 </div>

然后添加你的 CSS：

.container {
    margin:0 auto;
}

这会将整个容器移动到网站的中心。

【讨论】：