Pesquisei outras perguntas e, embora esse problema pareça um par de outras, nada do que vi até agora parece abordar o problema que estou tendo.
Eu tenho um div que contém um número de outros divs, cada um dos quais é flutuado para a esquerda. Essas divs contêm uma foto e uma legenda. Tudo o que eu quero é que o grupo de fotos seja centralizado na div que contém.
Como você pode ver no código abaixo, tentei usar ambos overflow:hidden
e margin:x auto
nos divs principais e também adicionei um clear:both
(como sugerido em outro tópico) após as fotos. Nada parece fazer a diferença.
Obrigado. Agradeço todas as sugestões.
<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>