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

https://stackoverflow.com/questions/2603700

25-09-2019
|

Pergunta

Eu quero ter 3 divs alinhados dentro de uma div contêiner, algo assim:

[[LEFT]       [CENTER]        [RIGHT]]

O DIV do contêiner tem 100% de largura (sem largura definida) e o Center Div deve permanecer no centro após o redimensionamento do contêiner.

Então eu defini:

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

Mas se torna:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Alguma dica?

Solução

Com esse CSS, coloque seus divs como assim (flutua em primeiro lugar):

<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 centrar. O importante é que os carros alegóricos cheguem antes da seção central "principal".

PPS Você costuma querer último por dentro #container Este trecho: <div style="clear:both;"></div> que se estenderá #container verticalmente para conter ambos os carros alegóricos laterais em vez de tirar sua altura apenas de #center e possivelmente permitindo que os lados se projetem para fora do fundo.

Outras dicas

Se você não deseja alterar sua estrutura HTML, você também pode fazer, adicionando text-align: center; para o elemento de invólucro e um display: inline-block; para o elemento centrado.

#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/

Alinhando três divs horizontalmente usando o Flexbox

Aqui está um método CSS3 para alinhar as 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>

jsfiddle

o justify-content A propriedade leva cinco valores:

flex-start (predefinição)
flex-end
center
space-between
space-around

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

Benefícios do Flexbox:

código mínimo; muito eficiente
Centraling, tanto vertical quanto horizontalmente, é simples e fácil
As colunas de altura igual são simples e fáceis
Várias opções para alinhar elementos flexíveis
É responsivo
Ao contrário de carros alegóricos e tabelas, que oferecem capacidade de layout limitada porque nunca foram destinados à construção de layouts, o Flexbox é uma técnica moderna (CSS3) com uma ampla gama de opções.

Para saber mais sobre a visita do Flexbox:

Métodos para alinhar itens flexíveis
Usando caixas flexíveis CSS ~ Mdn
Um guia completo para o Flexbox ~ Css-tricks
O que o Flexbox?! ~ Tutorial em vídeo do YouTube

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

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

Esta propriedade é usada para adicionar elemento à direita ou 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>

por float:left Saída será [First][second][Third]

por float:right Saída será [Third][Second][First]

Isso significa que float => Propriedade esquerda 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>

Primeiro segundo

Terceiro

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

Eu gosto das minhas barras apertadas e dinâmicas. Isto é para CSS 3 e HTML 5

Primeiro, definir a largura para 100px está limitando. Não faça isso.
Segundo, definir a largura do contêiner para 100% funcionará bem, até que falassem sobre ser uma barra de cabeçalho/rodapé para todo o aplicativo, como uma barra de navegação ou créditos/direitos autorais. Usar right: 0; Em vez disso, para esse cenário.
Você está usando id (hash #container, #left, etc) em vez de classes (.container, .left, etc), o que é bom, a menos que você queira repetir seu padrão de estilo em outro lugar do seu código. Eu consideraria usar as aulas.
Para HTML, não há necessidade de trocar a ordem para: esquerda, centro e direita. display: inline-block; Corrige isso, retornando seu código a algo mais limpo e logicamente para a ordem novamente.
Por fim, você precisa limpar os carros alegóricos para que não mexa com o futuro <div>. Você faz isso com o clear: 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; }
}

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

01. Usando o truque da tabela

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}

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

02. Usando truque flexível

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

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

03. Usando truques de flutuação

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

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

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

Verifica 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:

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

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

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

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>

Resposta possível, se você deseja 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%);
}

Código Link da caneta

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 central perfeito.

Demonstração JSfiddle

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 ver isso ao vivo em Jsfiddle

Usando Bootstrap 3 Eu crio 3 divs de igual largura (em 12 colunas do layout da coluna 4 para cada div). Dessa forma, você pode manter sua zona central centrada, mesmo que as seções esquerda/direita tenham larguras diferentes (se elas não transbordam 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 Bootstrap CSS.

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

Aqui estão as mudanças que eu tive que fazer na resposta aceita quando fiz isso com um imagem Como elemento central:

Verifique se a imagem está fechada dentro de uma div (#center nesse caso). Se não for, você terá que definir display para block, e parece centrar -se em relação ao espaço entre os elementos flutuados.

Certifique -se de definir o tamanho da imagem e seu recipiente:

#center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}

Você pode tentar isso:

Seu código HTML como este:

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

E seu código CSS como este:

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

Então, a saída deve ser assim:

[[LEFT]       [CENTER]        [RIGHT]]

.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

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

overflow: auto;

para sua classe de contêiner.

A solução mais fácil é criar uma tabela com 3 colunas e centro dessa 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;
}

#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 }

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow