En el mundo de HTML y CSS, se trata de la estructura del diseño y la distribución de elementos. Por lo general, usamos HTML para definir el marcado y la estructura, mientras que CSS nos ayuda a manejar el estilo y la alineación de los elementos.
En esta publicación aprenderemos un poco sobre las diferentes formas en que podemos centrar elementos HTML y manejar la alineación vertical con CSS.
Primero vamos a aprender cómo alinear texto con CSS.
A continuación, cubriremos cómo alinear un div y cualquier otro elemento.
Y finalmente aprenderemos cómo podemos poner texto y un div
juntos dentro de un contenedor.
Cómo centrar el texto
Hay muchas formas de centrar el texto usando CSS.
Usando la propiedad Float
Flotar es una forma fácil de alinear texto.
Para colocar el texto en el lado derecho del diseño, simplemente podemos usarlo right
como un valor para float
.
Para colocar el texto en el lado izquierdo, usamos left
, como float:left
. Mira el ejemplo de abajo:
.right { float: right; } .left { float: left; } // HTML Right Left
Para centrar el texto usando float podemos usar margin-left
o margin-right
y hacerlo 50%
, como se muestra a continuación.
.center { float: left; margin-left: 50%; } /* HTML*/ Center
Puede obtener más información sobre los usos de Float
aquí.
Usando Text-align
text-align
es una forma más conveniente y específica de alinear texto. Nos permite colocar el texto al center
o al lado left
o right
, como muestra el siguiente ejemplo:
.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ Right
Center
Left
Más información sobre text-align
.
Cómo alinear un div
Bueno, hay muchas formas de hacerlo.
De la misma manera que usamos Float
para alinear texto, también podemos usarlo para alinear un div
elemento.
Float
hace el trabajo, pero CSS nos brinda mejores opciones que son más convenientes y elegantes. ¿Has oído hablar de Flexbox
? ¿O css-grid?
Bueno, estos dos métodos proporcionan formas muy modernas de alinear y trabajar con su diseño en CSS. Veamos Flexbox con más detalle.
Flexbox
Flexbox ofrece una forma fácil y directa de alinear un div
, y es mi método favorito hasta ahora para manejar diseños en CSS (lo uso todos los días).
Veamos qué haríamos Flexbox
para ver cómo funciona recreando el mismo ejemplo anterior.
El ejemplo:
El código:
Flexbox .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div
vamos a analizarlo
- Siempre definimos un
div
padre usandodisplay:flex
para aplicarFlexbox
. Entonces, hacemos que todos los elementos secundarios de div dentro del padrediv
puedan manejarse usandoFlexbox
propiedades. - El
flex-direction
usa larow
dirección por defecto, lo que significa que los elementos se colocarán verticalmente dentro del contenedor. - Con la
justify-content
propiedad podemos alineardiv
los hijos de a en diferentes direcciones como en el siguiente ejemplo:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
justify-content:center
coloca los elementos en el centro del contenedor.justify-content:flex-start
pone los elementos al principio del contenedor de la izquierda.justify-content:flex-end
coloca elementos al final del contenedor en el lado derecho.justify-content:space-around
hace que los elementos quepan en el contenedor y coloque un espacio igual entre todos los elementos.justify-content:space-evenly
distribuye los elementos dentro del contenedor principal por igual con el mismo espacio y el mismo ancho.
El ejemplo anterior se aplica a todos los elementos secundarios como grupo.
Imagínese si quisiéramos alinear uno solo div
dentro del contenedor. Siempre podemos usar align-self
para alinear un solo elemento.
.container div{ align-self:center /* can have: flex-start, or flex-end*/ }
Podemos aplicar lo mismo a un texto con Flexbox
como en el siguiente ejemplo:
.right{ display: flex; align-items: flex-end; flex-direction: column; } right div
Este es un gran tweet de Julia Evans que ilustra el centrado en CSS en general:

Envolver
Hay muchas formas de centrar elementos en CSS. Y siempre aprenderá cosas nuevas con el tiempo a medida que practique más y más.
Así que te recomiendo que trabajes con algunos ejemplos de lo que aprendiste hoy para que se mantenga.
- ¿Deberías seguirme en Twitter?
- Echa un vistazo a My Github
- Visite mi Blog