将浮动div定位在另一个div中 [英] Centering floating divs within another div

问题描述

我搜寻了其他问题，虽然这个问题似乎与其他几个问题相似，但我目前所看到的问题似乎都无法解决我遇到的问题。

I've searched other questions and, while this problem seems similar to a couple of others, nothing I've seen so far seems to address the issue that I'm having.

我有一个div，其中包含许多其他div，每个都是左浮动。这些div每个都包含一张照片和一个标题。所有我想要的是照片的集合在包含div。

I have a div which contains a number of other divs, each of which is floated left. These divs each contain a photo and a caption. All I want is for the group of photos to be centered within the containing div.

从下面的代码，我已经尝试使用 overflow：hidden 和 margin：x auto ，我也添加了一个 ：两者（如另一主题中建议）。没有什么似乎有所作为。

As you can see from the code below, I've tried using both overflow:hidden and margin:x auto on the parent divs, and I've also added a clear:both (as suggested in another topic) after the photos. Nothing seems to make a difference.

谢谢。

<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>

推荐答案

div 的属性。然后，在主外部div上文本对齐：中心。对于内部， 显示：inline 或 < a href =http://www.w3schools.com/css/pr_class_display.asp =nofollow noreferrer> display：inline-block 。

刚刚测试它 - 显示：inline-block在内部divs工程。也许也明智地给他们明确的宽度。

Just tested it - display:inline-block on the inner divs works. Might also be wise to give them explicit widths too.

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

这篇关于将浮动div定位在另一个div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！