html - 将包含大小相对于页面宽度的图像的 div 居中

Question

我已经尝试过其他线程中的解决方案，但我不知所措。 我想要并排的两张图片，每张图片的宽度等于页面宽度的 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%。 我错过了什么？

Answer 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