html - 在另一个 div 中居中 float div

Question

我搜索了其他问题，虽然这个问题看起来与其他几个问题相似，但到目前为止我所看到的似乎都没有解决我遇到的问题。

我有一个包含许多其他 div 的 div，每个 div 都向左浮动。这些 div 每个都包含一张照片和一个标题。我只想让这组照片在包含的 div 中居中。

正如您从下面的代码中看到的，我已经尝试在父 div 上同时使用 overflow:hidden 和 margin:x auto，而且我还在照片后添加了 clear:both(如另一个主题中所建议的)。似乎没有什么不同。

谢谢。我很感激任何建议。

<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
    <h4>Section Header</h4>

    <div style="margin: 2em auto;">

        <div style="float: left; margin: auto 1.5em;">
            <img src="photo1.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo2.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo3.jpg" /><br />
             Photo Caption
        </div>

        <div style="clear: both; height: 0; overflow: hidden;"> </div>

    </div>

</div>

Answer 1

首先，删除内部 div 上的 float 属性。然后，输入 text-align: center在主要的外部 div 上。对于内部 div， 使用 display: inline-block .给它们明确的宽度也可能是明智的。

---

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>