Alineación de contenido con CSS

Alinear contenido o elementos en la web podría parecer algo muy sencillo (y lo es) pero con tantas opciones a veces podríamos confundirnos y no saber cual opción elegir para cada situación. En este articulo revisaremos como hacer alineación con CSS en tus sitios web. También revisaremos las distintas opciones que CSS nos brinda para poder alinear los elementos de nuestro sitio web.

Primero vamos a revisar como alinear texto dentro de un div. Es algo muy sencillo. En la mayoria de estos ejemplos utilizaremos un borde en el elemento padre para poder visualizar mejor el alineamiento.

Alineando contenido simple

text-align

Para alinear un texto dentro de un elemento padre, podemos utilizar la propiedad CSS text-align, esta propiedad tiene distintos valores que son center, left, right y justify. En el ejemplo de abajo tenemos distintos bloques de texto con los diferentes valores.

See the Pen Alineación de texto con CSS by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

margin

En ocasiones no queremos alinear texto si no elementos. En ese caso podemos utilizar la propiedad margin para alinear rápidamente un elemento.

utilizando margin: 0 auto; lograremos alinear elementos al centro, esto solo funciona de manera horizontal.

tambien podemos alinear elementos a la izquierda o a la derecha segun lo requiramos.

See the Pen Alineación de contenido con CSS margin by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

position absolute

También es posible alinear elementos con la propiedad absolute. Primero debemos indicar respecto a que otro elemento padre sera absoluto el movimiento de nuestro elemento. Por lo cual debemos colocar la propiedad position: relative; al elemento padre y position: absolute; al elemento hijo que queremos acomodar.

Al hacer un elemento absoluto este se “sale” del flujo de la pagina y no ocupa un espacio dentro de ella, es por esto que debemos indicar su tamaño con las propiedades width y height.

Tambien dispondremos de las propiedades top, left, bottom, y right, las cuales nos podrán ayudar a acomodar nuestro elemento en cada uno de esos ejes. Podremos utilizar unidades fijas o absolutas para acomodar nuestro elemento respecto al padre que hayamos definido como relativo.

See the Pen Alineación de contenido con CSS position absolute by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Flex

Flex es una tecnica de acomodo de elementos que facilita mucho la forma en la que hacemos alienación en CSS. Su objetivo es simplificar la creación de layouts en HTML. Consta de muchas propiedades que podemos utilizar para obtener un layout complejo en menos tiempo.

A continuación te muestro algunos ejemplos.

See the Pen Alineación de texto con CSS Flex by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Grid

Al igual que Flex, Grid es una técnica de alineación en CSS que permite obtener layouts complejos en menos tiempo. Consta mas o menos de las mismas propiedades pero la diferencia es que esta mas pensado para acomodar los elementos como si fueran una cuadricula.

A continuación te muestro varios ejemplos de uso.

See the Pen Alineación de texto con CSS Flex by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Aquí te dejo un video que grabe hace poco sobre esto. Disculpa que esta en ingles, prometo resubirlo en español. Por mientras sigueme en mi canal de Youtube para que puedas enterarte de los nuevos videos que vaya subiendo.

Si quieres seguir aprendiendo a como mejorar tu sitio web, tal vez te interese como mejorar la accesibilidad y SEO con HTML semántico.