[解決済み] フローティングDivを別のDivの中でセンタリングする

質問

他の質問を検索してみましたが、この問題は他のいくつかの問題と似ているようですが、私が抱えている問題を解決してくれるようなものは今のところ見当たりません。

私は、いくつかの他のdivを含むdivを持っており、それぞれのdivは左に浮いています。これらの div はそれぞれ写真とキャプションを含んでいます。私が望むのは、写真のグループを含む div の中央に配置することだけです。

以下のコードを見ていただければわかるように、私は、このコードに overflow:hidden と margin:x auto を親Divに追加し、さらに、その親Divに 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>

解決方法は？

まず float 属性は、内側の div s. 次に text-align: center メインアウター上の div . そしてインナーには div s, 使用 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>