Centrando divs flutuantes dentro de outra div
https://stackoverflow.com/questions/1269245
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu procurei outras perguntas e, enquanto este problema parece semelhante a um par de outros, nada que eu vi até agora parece para resolver o problema que estou tendo.
Eu tenho uma div que contém uma série de outros divs, cada um dos quais é lançada para a esquerda. Estes divs cada um contém uma foto e uma legenda. Tudo que eu quero é para o grupo de fotos a ser centralizado dentro da div contendo.
Como você pode ver no código abaixo, eu tentei usar tanto overflow:hidden e margin:x auto sobre os divs pai, e eu também acrescentou 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>
Solução
Em primeiro lugar, remover o atributo float nas divs internos. Em seguida, coloque text-align: center na principal div exterior. E para os divs internas,
uso display: inline-block . Pode também ser sábio para dar-lhes larguras explícitas também.
<div style="margin: auto 1.5em; display: inline-block;">
<img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
<br/>
Nadia Bjorlin
</div>
Outras dicas
Com Flexbox você pode facilmente horizontalmente (e verticalmente) Centro flutuou crianças dentro de uma div.
Então, se você tem marcação simples assim:
<div class="wpr">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
com CSS:
.wpr
{
width: 400px;
height: 100px;
background: pink;
padding: 10px 30px;
}
.wpr span
{
width: 50px;
height: 50px;
background: green;
float: left; /* **children floated left** */
margin: 0 5px;
}
(Este é o (esperado - e indesejável) RESULTADO )
Agora, adicione as seguintes regras para o wrapper:
display: flex;
justify-content: center; /* align horizontal */
e os filhos flutuavam se alinhar centro ( DEMONSTRA )
Apenas por diversão, para obter alinhamento vertical também apenas adicionar:
align-items: center; /* align vertical */
DEMONSTRA
I realizado o acima utilizando o posicionamento relativo e que flutua para a direita.
código HTML:
<div class="clearfix">
<div class="outer-div">
<div class="inner-div">
<div class="floating-div">Float 1</div>
<div class="floating-div">Float 2</div>
<div class="floating-div">Float 3</div>
</div>
</div>
</div>
CSS:
.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
jsFiddle: http://jsfiddle.net/MJ9yp/
Isto irá funcionar no IE8 e para cima, mas não antes (surpresa, surpresa!)
Não me lembro a fonte deste método, infelizmente, então não posso dar crédito ao autor original. Se mais alguém souber, por favor postar o link!
A solução a seguir não usa blocos inline. No entanto, são necessárias duas divs auxiliares:
- O conteúdo é flutuou
- O auxiliar interna é lançada (estende-se tanto quanto o conteúdo)
- O ajudante interior é empurrado direito a 50% (seus alinha esquerda com centro de ajudante externo)
- O conteúdo é puxado para 50% (seus alinha center com esquerda do ajudante interior) deixou
- O auxiliar externa está definido para ocultar o transbordamento
.ca-outer {
overflow: hidden;
background: #FFC;
}
.ca-inner {
float: left;
position: relative;
left: 50%;
background: #FDD;
}
.content {
float: left;
position: relative;
left: -50%;
background: #080;
}
/* examples */
div.content > div {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background: #FFF;
}
ul.content {
padding: 0;
list-style-type: none;
}
ul.content > li {
margin: 10px;
background: #FFF;
}<div class="ca-outer">
<div class="ca-inner">
<div class="content">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</div>
</div>
<hr>
<div class="ca-outer">
<div class="ca-inner">
<ul class="content">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
<li>Suspendisse iaculis risus ut dapibus cursus.</li>
</ul>
</div>
</div>
display: inline-block; não irá funcionar em qualquer um dos navegadores IE. Aqui está o que eu usei.
// change the width of #boxContainer to
// 1-2 pixels higher than total width of the boxes inside:
#boxContainer {
width: 800px;
height: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Box{
width: 240px;
height: 90px;
background-color: #FFF;
float: left;
margin-left: 10px;
margin-right: 10px;
}
Solução:
<!DOCTYPE HTML>
<html>
<head>
<title>Knowledge is Power</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#outer {
text-align:center;
width:100%;
height:200px;
background:red;
}
#inner {
display:inline-block;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
</div>
</body>
</html>
No meu caso, eu não poderia obter a resposta por @Sampson a trabalhar para mim, na melhor das hipóteses eu tenho uma única coluna centrado na página. No processo, no entanto, eu aprendi a bóia realmente funciona e criou esta solução. Na sua essência, a correção é muito simples, mas difícil de encontrar, como é evidente por esta discussão que teve mais de 146k pontos de vista no momento deste post sem menção.
Tudo o que é necessário é para totalizar a quantidade de largura de espaço de tela que o layout desejado ocupará em seguida, fazer o pai a mesma largura e aplicar margin: auto. É isso aí!
Os elementos no layout irá ditar a largura e altura da div "exterior". Tome cada ou a largura ou altura + suas fronteiras do elemento "myFloat" + suas margens e seus guarnição e adicioná-los todos juntos. Em seguida, adicione os outros elementos juntos na mesma forma. Isto lhe dará a largura pai. Eles podem ser todos os tamanhos um pouco diferentes e você pode fazer isso com menos ou mais elementos.
Ex. (Cada elemento tem 2 lados, de modo fronteira, margem e preenchimento get multiplicada x2)
Assim, um elemento que tem uma largura de 10px, 2px fronteira, 6px margem, estofamento 3px ficaria assim: 10 + 4 + 12 + 6 = 32
Em seguida, adicione todos larguras totalizaram do seu elemento juntos.
Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24
Neste exemplo, a largura para o div "exterior" seria 112.
.outer {
/* floats + margins + borders = 270 */
max-width: 270px;
margin: auto;
height: 80px;
border: 1px;
border-style: solid;
}
.myFloat {
/* 3 floats x 50px = 150px */
width: 50px;
/* 6 margins x 10px = 60 */
margin: 10px;
/* 6 borders x 10px = 60 */
border: 10px solid #6B6B6B;
float: left;
text-align: center;
height: 40px;
}<div class="outer">
<div class="myFloat">Float 1</div>
<div class="myFloat">Float 2</div>
<div class="myFloat">Float 3</div>
</div>
