Центрирование плавающих 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>