float - alinear dos div horizontalmente html

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

Question

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

[[LEFT]       [CENTER]        [RIGHT]]

La división del contenedor es 100% ancha (sin ancho de conjunto), y la división central debe permanecer en el centro después de cambiar el tamaño del contenedor.

Así que me puse:

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

Answer 1

Alineando tres divs horizontalmente usando Flexbox

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

La propiedad justify-content toma cinco valores:

• flex-start (predeterminado)
• 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://.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. https://.com/a/33856609/3597276
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 aprender más sobre la visita de flexbox:

• https://.com/a/33856609/3597276
• Usando cajas flexibles CSS ~ MDN
• Una guía completa para Flexbox ~ CSS-Tricks
• ¿Qué es el Flexbox? ~ Tutorial de video de YouTube

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

Answer 2

Aquí están los cambios que tuve que hacer en la respuesta aceptada cuando hice esto con una imagen como elemento central:

1. Asegúrese de que la imagen esté dentro de un div ( #center en este caso). Si no es así, deberás configurar la display para block , y parece centrarse 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;
   }

Answer 3

Con el bootstrap de twitter:

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

Answer 4

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

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

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

PPS A menudo desea el último dentro de #container este fragmento: <div style="clear:both;"></div> que extenderá verticalmente #container para contener ambos flotadores laterales en lugar de tomar su altura solo desde #center y posiblemente permitir que Lados para sobresalir del fondo.

Answer 5

Esto se puede hacer fácilmente usando el Flexbox de CSS3, una característica que se usará en el futuro (cuando <IE9 esté completamente muerto) en casi todos los navegadores.

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

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

Answer 6

Hay varios trucos disponibles para alinear los elementos.

01. Usando truco de mesa

.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. Utilizando Flex Trick

.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. Uso del truco de flotación

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

Answer 7

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

Answer 8

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

Esta propiedad se utiliza para agregar elementos a la derecha o a la 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>

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

para float:right salida float:right 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 el derecho

También debe tener en cuenta el ancho del elemento principal, si la suma de los anchos de los elementos secundarios supera el ancho del elemento principal, 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>

[Primer segundo]

[Tercero]

Así que debes considerar todos estos aspectos para obtener el resultado perfecto.

Answer 9

La solución más sencilla es crear una tabla con 3 columnas y centrarla.

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

Answer 10

Lo has hecho correctamente, solo necesitas limpiar tus flotadores. Simplemente añada

overflow: auto; 

a su clase de contenedor.

Answer 11

Me gustan mis bares apretados y dinámicos. Esto es para CSS 3 y HTML 5.

1. Primero, establecer el ancho a 100px es limitante. No lo hagas

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

3. Está utilizando id''s (hash #container , #left , etc) en lugar de clases ( .container , .left , etc), lo cual está bien, a menos que desee repetir su patrón de estilo en otro lugar 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; arregla esto, devolviendo su código a algo más limpio y lógicamente en orden nuevamente.

5. Por último, debe borrar todos los puntos flotantes para que no interfiera con el futuro <div> . Haces esto con 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; }

Punto de bonificación si utiliza 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; }
}

Answer 12

Posible respuesta, si desea mantener el orden del html y no utilizar 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

Answer 13

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 así:

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

Answer 14

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

Answer 15

Usando Bootstrap 3 creo 3 divs de igual ancho (en el 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

Answer 16

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 perfecta alineación al centro.

Demostración de JSFiddle

Answer 17

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

Answer 18

.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