Центрирование плавающих div внутри другого div

Я искал другие вопросы, и, хотя эта проблема, похоже, похожа на пару других, ничто из того, что я видел до сих пор, похоже, не решает проблему, с которой я столкнулся.

У меня есть div, который содержит ряд других div, каждый из которых перемещается влево. Каждый из этих элементов содержит фотографию и подпись. Все, что я хочу, это чтобы группа фотографий была сосредоточена внутри содержащего элемента div.

Как видно из приведенного ниже кода, я пытался использовать обаoverflow:hidden а такжеmargin:x auto на родительских элементах 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>

Ответы на вопрос(7)

Ваш ответ на вопрос