将包含大小与页面宽度相关的图像的 div 居中答案

【问题标题】：Centering a div that contains images whose size is relative to the page width将包含大小与页面宽度相关的图像的 div 居中
【发布时间】：2014-08-06 15:45:51
【问题描述】：

我已经尝试过其他线程中的解决方案，但我不知所措。我想要两张并排的图像，每张的宽度等于页面宽度的 40%，并且它们之间有 20px 的边距，并且整个 wazoo 应该居中。大致图解：

|            [img1 width:40%] 20px space [img2 width:40%]            |

我已经非常接近了，但没有什么能奏效。这是我得到的最接近的：

<!-- Starts centering with the addition of "width" to the div's style. -->
<div style="margin: 0 auto;">
    <img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block;">
    <img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block; margin-left: 20px;">
</div>

JSFiddle 上的这段代码：http://jsfiddle.net/98Se3/

如果没有指定宽度的 div，它坚决拒绝居中。但是，div 的宽度既不能相对于页面宽度进行设置，也不能完全以像素为单位，因为它应该是 40% + 20px + 40%。我错过了什么？

【问题讨论】：

这与你的问题无关，但你应该写
谢谢，很高兴知道。风格对可读性很重要。这是我的第一个 SO 问题：有一堆等价的、同样正确的答案。我可以确认多个吗？
html 中的 width/height 没有 px 或 % 之类的单位：(img width="20") CSS 中可以使用 % 或 px。
您可以为所有有效的答案投票，并选择一个通过演示得到很好解释的答案。如你所愿！

标签： html css centering

【解决方案1】：

只需对父 div 使用 text-align:center：

<div style="text-align:center">
    <img width="40%" src="http://bit.ly/1mlbOp6">
    <img width="40%" src="http://bit.ly/1mlbOp6" style="margin-left: 20px;">
</div>

看看这个working fiddle

【讨论】：

我明白了！这对我来说非常有效，谢谢。我是否正确理解这是有效的，因为将图像设置为显示为 inline-block 会使它们基本上像文本一样，所以 text-align 适用于它们？
实际上，您甚至不需要将它们设置为内联块，请查看我更新的小提琴。而text-align:center 将居中任何内容，包括块级元素

【解决方案2】：

你在寻找类似this fiddle的东西

<!-- Starts working (approximately) with the addition of "width" to the div's style. -->
<div style="margin: 0 auto; width:100%">
    <img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block;"><img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block; margin-left: 20%;">
</div>

更新了margin-left: 20%; 而不是margin-left: 20px;

和<img ...><img ..>之间没有差距

【讨论】：

【解决方案3】：

<div style="text-align:center">...</div>

这样内容居中，div 使用全宽，但除非它需要可见（边框、背景色等），否则它在视觉上并不重要。最后一部分可以通过在图像和样式周围设置<span> 来解决。

【讨论】：

【解决方案4】：

使用text-align:center; 代替margin:0 auto;

<div style="text-align:center;">

DEMO

【讨论】：