Como centralizar uma caixa entre outras duas em HTML e CSS

nahuelvazquez6 · 25/05/2015

Me he topado con un problema que parece sencillo pero que no logro resolver. La situación es la siguiente:

Tengo un contenedor sobre el cual quiero posicionar tres cajas. Las caja izquierda, la caja central, y la caja derecha. Pero que entre caja y caja haya un margen automático (no especificado en alguna unidad).

Código HTML

Inserir CODE, HTML ou PHP:

<div class="contenedor">
    <ul class="lista_desordenada">
         <li class="caja_izquierda">
         </li>
										
         <li class="caja_centro">
         </li>
										
         <li class="caja_derecha">
        </li>
    </ul>
</div>

Código CSS

Inserir CODE, HTML ou PHP:

.contenedor{
	margin-right:auto;
	margin-left:auto;
	width:790px;
	height:800px;
	background-color:green;
	}

.lista_desordenada{
	width:100%;
	}

.caja_izquierdal{
	float:left;
	width:250px;
	height:60px;
	}

.caja_centro{
	width:250px;
	height:60px;
        margin-left:auto;
        margin-right:auto;
	}

.caja_izquierda{
	float:right;
	width:250px;
	height:60px;
	}

Se me ocurrió utilizar un float para alinear la caja izquierda a la izquierda, uno para alinear la caja derecha a la derecha y a la caja del centro añadirle un margen automático con respecto al ancho del contenedor general. Esto no me funciono ya que la caja de la derecha se posiciona mas abajo, como si el margen rompiera la alineación del float. Aquí una imagen

Imagen

Alguna forma sencilla de hacerlo? Gracias por leerme!

antoninicr7 · 25/05/2015

Debes de crear una misma lista con las tres cajas, y añadirle simplemente un float left.
Si no entiendes lo que digo ahora en un rato pillo el ordenador y te hago el código.
Un saludo

nahuelvazquez6 · 25/05/2015

antoninicr7 disse:
Debes de crear una misma lista con las tres cajas, y añadirle simplemente un float left.
Si no entiendes lo que digo ahora en un rato pillo el ordenador y te hago el código.
Un saludo

Hola, gracias por contestar! Comprendo lo que dices, me olvide de colocar un detalle importante en el post (ya lo edite). Me gustaría que entre caja y caja haya un margen automático (no especificado en alguna unidad).
Es decir, alinearlos no tengo problema, el problema surge cuando quiero agregar ese margen entre caja y caja

lombervid · 25/05/2015

Con Flexbox es fácil hacer eso.

HTML:

PHP:

<div id="contenedor">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

CSS:

PHP:

#contenedor {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.left,
.right {
    width: 20%;
    height: 150px;
    background: green;
}
.center {
    width: 50%;
    height: 300px;
    background: pink;
}

https://jsfiddle.net/mag2bqku/embedded/result/

Saludos.

nahuelvazquez6 · 25/05/2015

lombervid disse:

Con Flexbox es fácil hacer eso.

HTML:

PHP:

<div id="contenedor">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

CSS:

PHP:

#contenedor {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.left,
.right {
    width: 20%;
    height: 150px;
    background: green;
}
.center {
    width: 50%;
    height: 300px;
    background: pink;
}

https://jsfiddle.net/mag2bqku/embedded/result/

Saludos.

Lo probé y funciona! Te agradezco un monton 😛8:

Lenny Creative · 23/08/2015

muy bueno eso de los Flexbox, hace unos minutos me tope con un tutorial de ello y despues de ver par de video tutoriales veo que es muy util para no romperse la cabeza, tambien recomendar en ya no usar tanto px en los anchos sino porcentajes, pero con Flexbox lo veo mas bueno, aunque no se que tan cierto es la compatibilidad con algunos navegadores que tienes que agregarle prefijos.

pinchox · 26/08/2015

Otra cosa que se puede hacer es absolutizar las cajas de la izquierda y derecha. De ese modo, se van a mostrar siempre ahi, mientras que a la caja central la tenes con margenes auto.

Como centralizar uma caixa entre outras duas em HTML e CSS

nahuelvazquez6

antoninicr7

nahuelvazquez6

lombervid

nahuelvazquez6

Lenny Creative

pinchox

Tópicos similares