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>
Respostas:
Primeiro, remova o
float
atributo no interiordiv
. Em seguida, coloquetext-align: center
a parte externa principaldiv
. E para o interiordiv
, usedisplay: inline-block
. Também pode ser prudente fornecer larguras explícitas também.fonte
Com o Flexbox, você pode facilmente centralizar crianças horizontalmente (e verticalmente) dentro de uma div.
Portanto, se você tem uma marcação simples como esta:
com CSS:
(Este é o esperado (- e indesejável) RESULTADO )
Agora adicione as seguintes regras ao wrapper:
e as crianças flutuadas ficam alinhadas no centro ( DEMO )
Apenas por diversão, para obter alinhamento vertical, basta adicionar:
DEMO
fonte
Eu realizei o acima usando posicionamento relativo e flutuando para a direita.
Código HTML:
CSS:
JSFiddle: http://jsfiddle.net/MJ9yp/
Isso funcionará no IE8 e superior, mas não antes (surpresa, surpresa!)
Infelizmente, não me lembro da fonte desse método, portanto não posso dar crédito ao autor original. Se alguém mais souber, por favor poste o link!
fonte
A solução a seguir não usa blocos embutidos. No entanto, ele requer duas divs auxiliares:
fonte
display: inline-block;
não funcionará em nenhum navegador IE. Aqui está o que eu usei.fonte
Solução:
fonte
No meu caso, não consegui que a resposta de @Sampson funcionasse para mim, na melhor das hipóteses, tinha uma única coluna centralizada na página. No processo, no entanto, aprendi como o float realmente funciona e criei esta solução. No seu núcleo, a correção é muito simples, mas difícil de encontrar, como evidente por este segmento, que teve mais de 146 mil visualizações no momento deste post, sem menção.
Tudo o que é necessário é totalizar a quantidade de largura do espaço da tela que o layout desejado ocupará, tornar o pai a mesma largura e aplicar a margem: auto. É isso aí!
Os elementos no layout ditarão a largura e a altura da div "externa". Pegue na largura ou altura de cada "myFloat" ou elemento + suas bordas + suas margens e seus preenchimentos e adicione-os todos juntos. Em seguida, adicione os outros elementos da mesma maneira. Isso fornecerá a largura principal. Todos eles podem ter tamanhos um pouco diferentes e você pode fazer isso com menos ou mais elementos.
Ex. (Cada elemento tem 2 lados, para que a borda, a margem e o preenchimento sejam multiplicados x2)
Portanto, um elemento com largura de 10 px, borda 2px, margem 6px, preenchimento de 3px ficaria assim: 10 + 4 + 12 + 6 = 32
Em seguida, adicione todas as larguras totais do seu elemento.
Neste exemplo, a largura da div "externa" seria 112.
fonte