Páginas

martes, 24 de febrero de 2015

HTML y CSS: Varias formas de alinear un DIV dentro de otro DIV

Esto es lo que hay, tres elementos dentro de un contenedor:
Este es el HTML:
Este es el CSS:
#container{
 height: 400px;
 width: 700px;
 background-color: orange;
}

#item{
 height: 100px;
 width: 200px;
 background-color: yellow;
 border: 1px solid black;

}

Primero hay que agregar la propiedad de display:inline-block; a los items para que se ordenen en una sola linea
Ahora podemos alinear verticalmente aplicando display:flex; align-items:center en el contenedor y margin:0 auto; en los elementos internos para alinear horizontalmente. El resultado:
Y aqui el CSS:
#container{
 height: 400px;
 width: 700px;
 background-color: orange;
        display:flex;
        align-items:center;
}

#item{
 height: 100px;
 width: 200px;
 background-color: yellow;
 border: 1px solid black;
 display: inline-block;
        margin: 0 auto;
}

No hay comentarios:

Publicar un comentario