Como alinhar 3 divs (esquerda / centro / direita) dentro de outra div?

392

Eu quero ter 3 divs alinhados dentro de um container div, algo como isto:

[[LEFT]       [CENTER]        [RIGHT]]

A div do contêiner tem 100% de largura (sem largura definida), e a div central deve permanecer no centro após redimensionar o contêiner.

Então eu defino:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Mas torna-se:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Alguma dica?

html  css  flexbox  alignment  css-float 
— serg
fonte
11
Se o contêiner se tornar mais estreito do que 300 px de largura, isso acontecerá, a menos que você defina a propriedade overflow.
— inkedmn
Flexbox e também Grid: jsfiddle.net/w0s4xmc0/12963 #
— Manoj Kumar
Apenas para observar - conforme o comentário de @ inkedmn, com um monte de conteúdo em cada coluna, não consegui fazer com que todos eles se alinhassem corretamente em qualquer largura de contêiner sem overflow: hidden;a centercoluna. Em seguida, na consulta de mídia para dispositivos pequenos, quando eu tinha as três colunas centralizadas na página uma sobre a outra, eu precisava overflow: hidden;da linha do meio (que era a coluna da direita em dispositivos grandes), caso contrário não tinha altura e não estava centralizada verticalmente entre a linha superior e inferior.
— Chris L

Respostas:

364

Com esse CSS, coloque suas divs assim (flutua primeiro):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS: Você também pode flutuar para a direita, depois para a esquerda e depois para o centro. O importante é que os carros alegóricos cheguem antes da seção central "principal".

PPS Você geralmente deseja o último dentro #containerdeste trecho: <div style="clear:both;"></div>que se estenderá #containerverticalmente para conter os dois flutuadores laterais, em vez de tirar sua altura apenas de #centere possivelmente permitir que os lados se projetem para fora do fundo.

— dkamins
fonte
como você faria isso se o contêiner não fosse 100%? Im tentando algo parecido aqui, eu gostaria que as div fazer estadia na direita do recipiente, mas ele flutua para a direita da página
— Tiago
@Tiago: Os carros alegóricos devem permanecer restritos à div se estiverem dentro dela. Verifique qual é a largura do contêiner configurando-o para border:solid. Se for 100%, coloque-o em outra div para posicioná-lo dentro da sua página.
— James P.
Além disso - Se você os colocar dentro de um contêiner redimensionável, defina uma largura mínima do contêiner para impedir que a div flutuada à direita seja empurrada para baixo.
— Tapefreak
6
Esta resposta tem mais de seis anos. Em 2016, a resposta correta é flexbox.
11
@torazaburo, talvez haja mais de uma resposta correta, existem muitas maneiras de chegar ao mesmo ponto, neste caso, devo usar esta solução porque uma estrutura que eu uso, já define esquerda e direita com float para elementos, apenas adicionar elemento central no final é perfeito para mim.
— Ninja Coding
128

Se você não deseja alterar sua estrutura HTML, também pode fazê-lo adicionando text-align: center;ao elemento wrapper e display: inline-block;a ao elemento centralizado.

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

Demonstração ao vivo: http://jsfiddle.net/CH9K8/

— fruechtemuesli
fonte
11
Esta é a única solução que redimensiona corretamente com a largura da janela sem dobrar muito cedo.
— precisa
2
É perfeito quando os tamanhos esquerdo e direito são iguais. Caso contrário, o centro não está centralizado.
— mortalis
127

Alinhando três divs horizontalmente usando o Flexbox

Aqui está um método CSS3 para alinhar divs horizontalmente dentro de outra div.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
Expandir snippet

jsFiddle

A justify-contentpropriedade assume cinco valores:

  • flex-start (padrão)
  • flex-end
  • center
  • space-between
  • space-around

Em todos os casos, os três divs estão na mesma linha. Para obter uma descrição de cada valor, consulte: https://stackoverflow.com/a/33856609/3597276

Benefícios do flexbox:

  1. código mínimo; muito eficiente
  2. centralizar, vertical e horizontalmente, é simples e fácil
  3. colunas de igual altura são simples e fáceis
  4. várias opções para alinhar elementos flexíveis
  5. é responsivo
  6. ao contrário de carros alegóricos e tabelas, que oferecem capacidade limitada de layout porque nunca foram projetados para criar layouts, o flexbox é uma técnica moderna (CSS3) com uma ampla variedade de opções.

Para saber mais sobre a flexbox, visite:

Suporte ao navegador: O Flexbox é suportado por todos os principais navegadores, exceto o IE <10 . Algumas versões recentes do navegador, como o Safari 8 e o IE10, exigem prefixos de fornecedores . Para uma maneira rápida de adicionar prefixos, use o Autoprefixer . Mais detalhes nesta resposta .

— Michael Benjamin
fonte
7
Flex é muito melhor do que usar carros alegóricos.
— Faizan Akram Dar
11
Ótima explicação aqui e nos posts vinculados! Uma nota lateral: o uso de elementos "span" como itens flex dentro da div do contêiner funcionava no firefox, mas não funcionava em um navegador baseado em javafx (visualização na web). Alterar os "vãos" para "divs" funcionou em ambos.
— Ashok
Internet Explorer 10 e versões anteriores não suportam a propriedade justificar-content
— D.Snap
11
Infelizmente, isso funciona apenas com itens da mesma largura. Consulte também stackoverflow.com/questions/32551291/…
— handle
Excelente, experimentei todas as soluções aqui e esta é a melhor!
— Nico Müller
22

A propriedade Float não é realmente usada para alinhar o texto.

Esta propriedade é usada para adicionar elemento à direita, esquerda ou centro. 

div > div { border: 1px solid black;}
<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>
Expandir snippet

para float:leftsaída será[First][second][Third]

para float:rightsaída será[Third][Second][First]

Isso significa que a propriedade float => left adicionará seu próximo elemento à esquerda do anterior, o mesmo caso com a direita

Além disso, você deve considerar a largura do elemento pai, se a soma das larguras dos elementos filhos exceder a largura do elemento pai, o próximo elemento será adicionado na próxima linha

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>
Expandir snippet

[Primeiro segundo]

[Terceiro]

Então você precisa considerar todos esses aspectos para obter o resultado perfeito

— Rajiv Pingale
fonte
13

Eu gosto dos meus bares apertados e dinâmicos. Isto é para CSS 3 e HTML 5

  1. Primeiro, definir a largura como 100px é limitante. Não faça isso.

  2. Segundo, definir a largura do contêiner para 100% funcionará bem, até que falássemos de uma barra de cabeçalho / rodapé para todo o aplicativo, como uma barra de navegação ou créditos / direitos autorais. Use em right: 0;vez disso para esse cenário.

  3. Você está usando IDs (hash #container, #leftetc) em vez de classes ( .container, .leftetc), o que é bom, a menos que você queira repetir seu padrão de estilo em outro lugar no seu código. Eu consideraria usar classes em seu lugar.

  4. Para HTML, não é necessário trocar a ordem por: esquerda, centro e direita. display: inline-block;corrige isso, retornando seu código para algo mais limpo e logicamente em ordem novamente.

  5. Por fim, você precisa limpar todos os carros alegóricos para que não mexa no futuro <div>. Você faz isso com oclear: both;

Para resumir:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

Ponto de bônus se estiver usando HAML e SASS;)

HAML:

.container
  .left
  .center
  .right
  .clear

SASS:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}
— Eric Wanchic
fonte
12

Existem vários truques disponíveis para alinhar os elementos.

01. Usando truque de tabela

Mostrar snippet de código

02. Usando o truque do Flex

Mostrar snippet de código

03. Usando truque de flutuação

Mostrar snippet de código

— Santosh Khalse
fonte
11

Isso pode ser feito facilmente usando o CSS3 Flexbox, um recurso que será usado no futuro (quando <IE9 estiver completamente morto) por quase todos os navegadores.

Verifique a tabela de compatibilidade do navegador

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Resultado:

Mostrar snippet de código

— Manoj Kumar
fonte
4

Com o twitter bootstrap: 

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
— Ka.
fonte
3

resposta possível, se você quiser manter a ordem do html e não usar o flex.

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

Code Pen Link

— Pruthvi P
fonte
2

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; dá alinhamento perfeito ao centro.

JSFiddle Demo

— Khalid Farhan
fonte
Ele só centraliza o div no seu exemplo, porque os elementos de texto tem quase o mesmo tamanho, fazer um texto mais longo eo div #center não é no centro mais: jsfiddle.net/3a4Lx239
— Kai Noack
1

Fiz outra tentativa de simplificar isso e alcançá-lo sem a necessidade de um contêiner.

HTML 

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

Você pode vê-lo ao vivo no JSFiddle

— user15100
fonte
1

Usando o Bootstrap 3 , crio 3 divs de largura igual (no layout de 12 colunas, 4 colunas para cada div). Dessa forma, você pode manter sua zona central centralizada, mesmo que as seções esquerda / direita tenham larguras diferentes (se elas não sobrecarregarem o espaço de suas colunas).

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

Para criar essa estrutura sem bibliotecas, copiei algumas regras do CSS do Bootstrap.

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

— mortalis
fonte
0

Aqui estão as alterações que tive que fazer na resposta aceita quando fiz isso com uma imagem como elemento central:

  1. Verifique se a imagem está dentro de uma div ( #centerneste caso). Caso contrário, será necessário definir displaycomo block, e parece centralizar-se em relação ao espaço entre os elementos flutuados.

  2. Certifique-se de definir o tamanho da imagem e de seu contêiner:

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
— Sam
fonte
0

Você pode tentar isso:

Seu código html assim:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

e seu código css assim:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

então, sua saída deve ser assim:

[[LEFT]       [CENTER]        [RIGHT]]
— Radisya
fonte
-1 
.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess
— Shubham
fonte
2
Bem-vindo ao Stack Overflow! Por favor, adicione algumas explicações sobre por que esse código ajuda o OP. Isso ajudará a fornecer uma resposta que os futuros espectadores podem aprender. Veja Como responder para mais informações.
— Heretic Monkey
-3

Você fez isso corretamente, só precisa limpar seus carros alegóricos. Basta adicionar 

overflow: auto;

para sua classe de contêiner.

— Mustapha ZEGAOULA
fonte
-6

A solução mais fácil é criar uma tabela com 3 colunas e centralizar essa tabela.

html:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

css:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}
— Sthembiso F. Makhathini
fonte
-10 
#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
— bytes
fonte
2
Em vez de publicar apenas um bloco de código, explique por que esse código resolve o problema apresentado. Sem uma explicação, isso não é uma resposta.
— Martijn Pieters
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.