¿Cómo alinear 3 divs (izquierda / centro / derecha) dentro de otro div?

392

Quiero tener 3 divs alineados dentro de un contenedor div, algo como esto:

[[LEFT]       [CENTER]        [RIGHT]]

El contenedor div es 100% ancho (sin ancho establecido), y el centro div debe permanecer en el centro después de cambiar el tamaño del contenedor.

Entonces configuré:

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

Pero se convierte en:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

¿Algun consejo?

html  css  flexbox  alignment  css-float 
— serg
fuente
1
Si el contenedor se vuelve más estrecho que 300px de ancho, eso sucederá a menos que establezca la propiedad de desbordamiento.
— inkedmn
Flexbox y también Grid: jsfiddle.net/w0s4xmc0/12963
— Manoj Kumar
Solo para tener en cuenta: según el comentario de @inkedmn, con un montón de contenido en cada columna, no pude lograr que todos se alineen correctamente en cualquier ancho de contenedor sin overflow: hidden;la centercolumna. Luego, en la consulta de medios para dispositivos pequeños cuando tenía las 3 columnas centradas en la página una encima de la otra, necesitaba overflow: hidden;en la fila central (que era la columna derecha en dispositivos grandes) de lo contrario no tenía altura y no estaba centrada verticalmente entre la fila superior e inferior.
— Chris L

Respuestas:

364

Con ese CSS, coloque sus divs así (flota primero):

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

PD: También puedes flotar a la derecha, luego a la izquierda y luego al centro. Lo importante es que los flotadores vienen antes de la sección central "principal".

PPS A menudo desea el último lugar dentro de #containereste fragmento: <div style="clear:both;"></div>que se extenderá #containerverticalmente para contener ambos flotadores laterales en lugar de tomar su altura solo #centery posiblemente permitir que los lados sobresalgan del fondo.

— dkamins
fuente
¿Cómo lo harías si el contenedor no fuera 100%? Estoy intentando algo así aquí, me gustaría que el div permanezca a la derecha del contenedor, pero flota a la derecha de la página
— Tiago
@Tiago: los flotadores deben permanecer limitados al div si están dentro de él. Compruebe cuál es el ancho del contenedor configurándolo en border:solid. Si es 100%, enciérrelo en otro div para colocarlo dentro de su página.
— James P.
Además, si los coloca dentro de un contenedor redimensionable, asegúrese de establecer un ancho mínimo del contenedor para evitar que el div flotante a la derecha no sea empujado hacia abajo.
— Tapefreak
66
Esta respuesta tiene más de seis años. En 2016, la respuesta correcta es flexbox.
1
@torazaburo, tal vez hay más de una respuesta correcta, hay muchas maneras de llegar al mismo punto, en este caso, debo usar esta solución porque un marco que uso, ya se establece a la izquierda y a la derecha con flotante a elementos, solo agregar elemento central al final es perfecto para mí.
— Ninja Coding
128

Si no desea cambiar su estructura HTML, también puede hacerlo agregando text-align: center;al elemento contenedor y display: inline-block;a al 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;
}

Demostración en vivo: http://jsfiddle.net/CH9K8/

— Fruechtemuesli
fuente
1
Esta es la única solución que cambia de tamaño correctamente con el ancho de la ventana sin doblarse demasiado pronto.
— Jared Sealey
2
Es perfecto cuando los tamaños izquierdo y derecho son iguales. De lo contrario, el Centro no está centrado.
— mortalis
127

Alinear tres divisiones horizontalmente con Flexbox

Aquí hay un método CSS3 para alinear divs horizontalmente dentro de otro 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 fragmento

jsFiddle

La justify-contentpropiedad toma cinco valores:

  • flex-start (defecto)
  • flex-end
  • center
  • space-between
  • space-around

En todos los casos, los tres divs están en la misma línea. Para obtener una descripción de cada valor, consulte: https://stackoverflow.com/a/33856609/3597276

Beneficios de flexbox:

  1. código mínimo muy eficiente
  2. centrar, tanto vertical como horizontalmente, es simple y fácil
  3. columnas de igual altura son simples y fáciles
  4. Múltiples opciones para alinear elementos flexibles
  5. es sensible
  6. A diferencia de los flotadores y las tablas, que ofrecen una capacidad de diseño limitada porque nunca fueron diseñados para crear diseños, flexbox es una técnica moderna (CSS3) con una amplia gama de opciones.

Para obtener más información sobre la visita de flexbox:

Soporte de navegador: Flexbox es compatible con todos los principales navegadores, excepto IE <10 . Algunas versiones recientes del navegador, como Safari 8 e IE10, requieren prefijos de proveedor . Para una forma rápida de agregar prefijos, use Autoprefixer . Más detalles en esta respuesta .

— Michael Benjamin
fuente
77
Flex es mucho mejor que usar flotadores.
— Faizan Akram Dar
1
¡Gran explicación aquí y en las publicaciones vinculadas! Una nota al margen: el uso de elementos "span" como elementos flexibles dentro del contenedor div funcionó en firefox pero no funcionó en un navegador basado en javafx (webview). Cambiar los "tramos" a "divs" funcionó en ambos.
— Ashok
Internet Explorer 10 y versiones anteriores no admiten la propiedad
— justify
1
Desafortunadamente, esto solo funciona con elementos del mismo ancho. También vea stackoverflow.com/questions/32551291/…
— maneje el
Excelente, probé todas las soluciones aquí y esta es la mejor.
— Nico Müller
22

La propiedad flotante en realidad no se usa para alinear el texto.

Esta propiedad se usa para agregar elementos a derecha o izquierda o al 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 fragmento

para float:left salida será[First][second][Third]

para float:right salida será[Third][Second][First]

Eso significa que la propiedad float => left agregará su próximo elemento a la izquierda del anterior, el mismo caso con la derecha

También debe tener en cuenta el ancho del elemento primario, si la suma de los anchos de los elementos secundarios excede el ancho del elemento primario, entonces el siguiente elemento se agregará en la siguiente línea

 <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 fragmento

[Primer segundo]

[Tercero]

Por lo tanto, debe tener en cuenta todos estos aspectos para obtener el resultado perfecto

— Rajiv Pingale
fuente
13

Me gustan mis barras apretadas y dinámicas. Esto es para CSS 3 y HTML 5

  1. Primero, establecer el Ancho en 100px es limitante. No lo hagas

  2. En segundo lugar, establecer el ancho del contenedor al 100% funcionará bien, hasta que hablemos de que es una barra de encabezado / pie de página para toda la aplicación, como una barra de navegación o créditos / derechos de autor. Utilice en su right: 0;lugar para ese escenario.

  3. Está utilizando de Identificación (hachís #container, #leftetc.) en lugar de clases ( .container, .left, etc.), lo cual está bien, si no quiere repetir el patrón de estilo en otras partes de su código. Consideraría usar clases en su lugar.

  4. Para HTML, no es necesario cambiar el orden por: izquierda, centro y derecha. display: inline-block;corrige esto, devolviendo su código a algo más limpio y lógicamente en orden nuevamente.

  5. Por último, debe limpiar todos los flotadores para que no se meta con el futuro <div>. Haces esto con elclear: 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; }

Punto de bonificación si usa HAML y SASS;)

HAML:

.container
  .left
  .center
  .right
  .clear

HABLAR CON DESCARO A:

.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
fuente
12

Hay varios trucos disponibles para alinear los elementos.

01. Usando Table Trick

Mostrar fragmento de código

02. Usando Flex Trick

Mostrar fragmento de código

03. Usando Flotador Truco

Mostrar fragmento de código

— Santosh Khalse
fuente
11

Esto se puede hacer fácilmente usando CSS3 Flexbox, una característica que será utilizada en el futuro (cuando <IE9esté completamente muerta) por casi todos los navegadores.

Consulte la tabla de compatibilidad del 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 */
}

Salida:

Mostrar fragmento de código

— Manoj Kumar
fuente
4

Con 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
fuente
3

posible respuesta, si desea mantener el orden del html y no usar 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
fuente
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; da alineación perfecta del centro.

JSFiddle Demo

— Khalid Farhan
fuente
Solo centra el div en su ejemplo porque los elementos de texto tienen casi el mismo tamaño, alargan un texto y el #center div ya no está en el centro: jsfiddle.net/3a4Lx239
— Kai Noack
1

Hice otro intento de simplificar esto y lograrlo sin la necesidad de un contenedor.

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

Puedes verlo en vivo en JSFiddle

— usuario15100
fuente
1

Usando Bootstrap 3 creo 3 divs de igual ancho (en un diseño de 12 columnas, 4 columnas para cada div). De esta manera, puede mantener su zona central centrada incluso si las secciones izquierda / derecha tienen anchos diferentes (si no desbordan el espacio de sus columnas).

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 crear esa estructura sin bibliotecas, copié algunas reglas de 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

— mortalis
fuente
0

Estos son los cambios que tuve que hacer a la respuesta aceptada cuando hice esto con una imagen como elemento central:

  1. Asegúrese de que la imagen esté encerrada dentro de un div ( #centeren este caso). Si no es así, deberá configurarlo displayenblock , y parece que el centro en relación con el espacio entre los elementos flotantes.

  2. Asegúrese de establecer el tamaño de la imagen y su contenedor:

    #center {
    margin: 0 auto;
}

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

Puedes probar esto:

Su código html como este:

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

y su código CSS como este:

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

entonces, su salida debería ser así:

[[LEFT]       [CENTER]        [RIGHT]]
— kishan Radadiya
fuente
-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
fuente
2
¡Bienvenido a Stack Overflow! Agregue alguna explicación de por qué este código ayuda al OP. Esto ayudará a proporcionar una respuesta de la que los futuros espectadores puedan aprender. Consulte Cómo responder para obtener más información.
— Heretic Monkey
-3

Lo has hecho correctamente, solo necesitas limpiar tus flotadores. Simplemente agregue 

overflow: auto;

a su clase de contenedor.

— Mustapha ZEGAOULA
fuente
-6

La solución más fácil es crear una tabla con 3 columnas y centrar esa tabla.

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
fuente
-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
fuente
2
En lugar de solo publicar un bloque de código, explique por qué este código resuelve el problema planteado. Sin una explicación, esto no es una respuesta.
— Martijn Pieters
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.