小编典典

将浮动div置于另一个div的中心

css

我搜索了其他问题,尽管这个问题似乎与其他几个问题相似,但到目前为止,我所看到的任何问题似乎都无法解决我遇到的问题。

我有一个div,其中包含许多其他div,每个div都向左浮动。这些div分别包含照片和标题。我要的是使照片组位于包含div的中心。

从下面的代码中可以看到,我已经尝试在父div上同时使用overflow:hiddenmargin: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>

阅读 508

收藏
2020-05-16

共1个答案

小编典典

首先,删除float内部div的属性。然后,穿上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>
2020-05-16