Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Cómo crear texto perfectamente centrado con Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Joaquin Revuelta (you can also view the original English article)

No hay nada que nos impresione especialmente con respecto al centrado horizontal de tu contenido: lo has estado haciendo durante años. Pero, ¿qué pasa con el centrado vertical de tu contenido de altura variable? En este vídeo de mi curso, 6 proyectos Flexbox para Diseñadores Web, aprenderás cómo Flexbox soluciona este problema con un esfuerzo mínimo.

Cómo crear texto perfectamente centrado con Flexbox

Presentando el Proyecto en CodePen

En este tutorial, os mostraré lo fácil que es usar el modelo Flexbox para centrar el contenido que queráis tanto horizontal como verticalmente.

Comenzad por ir al starting pen de este proyecto en CodePen, y haced click en Fork para abrir una copia nueva. Realizaremos los cambios en esta nueva copia.

Primero, echemos un vistazo al HTML.

Flexbox starting HTML

Lo que tenemos aquí es un banner, cuyos componentes están contenidos en un div cuya clase es banner. Dentro de ella tenemos otro div cuya clase es banner-text. Y luego tenemos los elementos h1, h3 y h6 que contienen todo nuestro texto. Por tanto los tres elementos de texto están contenidos en el interior de ese div que tiene la clase banner-text.

Ya hemos configurado el banner dentro de nuestro CSS.

Starting CSS

Si vamos hacia abajo dentro de la clase banner, vemos que hemos elegido el blanco como color del texto. Hemos creado una imagen de fondo.  La hemos posicionado, hemos ajustado su tamaño, y le hemos dado un altura de 300 píxeles. Y hemos aplicado algunos estilos a los tres elementos de texto que están dentro de nuestro banner, nuestros h1, h3 y h6.

Hemos configurado los márgenes a cero para que se vean perfectos y se acomoden justo al lado de cada uno de ellos, y hemos colocado un poco de sombra tras el texto. Y también hay otras reglas que puedes repasar para ver su comportamiento.

La antigua forma de centrar texto

Lo que quiero mostraros llegados a este punto es la forma en la que yo solía alinear nuestro texto tanto de forma vertical como horizontal.

Alinear nuestro texto de forma horizontal es muy sencillo.  Así que simplemente debemos ir a la regla que controla nuestras tres cabeceras, h1, h3 y h6, dentro de nuestro banner, y configurar la regla text-align como center.

La parte difícil es centrar el texto verticalmente.

Si sólo tienes una línea de texto, puedes centrarla verticalmente de forma sencilla configurando la altura de línea (line-height) para que tenga el mismo valor que la del contenedor. Nuestro contenedor es el propio banner, que tiene 300 píxeles de alto, así que si sólo tuviéramos una línea de texto podríamos asignar la altura de línea a 300 píxeles y de ese modo el texto quedaría centrado verticalmente.

Pero, ¿y si tienes varias líneas de texto? ¿Y si tienes un párrafo o un texto más amplio? ¿Y si tienes una mezcla de texto e imágenes y quieres que todo un bloque de contenido se centre verticalmente?

Bien, el modo en que solía hacerlo es sólo para que le echéis un vistazo. Así que habría creado una nueva regla para .banner-text y habría jugado un poco con ella, incrementando el padding superior a través de distintos valores hasta que tuviera el aspecto deseado.

Pero no se puede confiar siempre en el viejo método, porque, ¿y si alguien modifica los tamaños de los textos hasta el punto de que ya no se encuentra centrado? De esta forma no tienes control sobre él.

Centrar texto con Flexbox

Flexbox nos permite centrar nuestro texto verticalmente de una forma mucho más sencilla y precisa que el viejo método.

Cuando usamos el modelo Flexbox, ni siquiera necesitamos una regla para la clase banner-text. Todo lo que necesitamos hacer es modificar el contenedor flex, que se va a convertir en nuestra clase banner.

La clase banner representa al div que es el nivel superior (parent) de ese texto. Así que dentro de la regla de la clase banner, vamos a configurar nuestro display como flex.

Luego, dentro de la regla de banner, después de display: flex, vamos a hacer un par de cosas más. Añadimos justifiy-content: center, que es la forma en que vamos a centrar todo horizontalmente.

Y entonces, lo último que necesitamos hacer es averiguar cómo centrar el contenido verticalmente.

Podemos alinear los elementos a lo largo del eje central usando justify-content. Pero también podemos alinear los contenidos a lo largo del eje vertical usando otra propiedad llamada align-items.

Si lo hicimos flex-start, el texto aparecería en la parte superior. Si lo cambiamos a flex-end, aparecería en la parte inferior. También podemos acceder al mismo valor de center, que alineará de forma vertical nuestro texto.

Así que esta propiedad align-items actúa de la misma forma que la propiedad justify-content, pero lo hace a través del eje horizontal y en lugar del principal. Cuando creamos un contenedor flex usando display: flex, por defecto se asigna a una fila en vez de a una columna, así que el eje principal pasa a ser el horizontal. Así, justify-content va a operar a lo largo de nuestro eje horizontal, y la propiedad align-items lo hará a través del eje de corte, que, en este caso, es el vertical.

Este es el aspecto que tiene al final:

Puedes encontrar todo el código para el efecto final en CodePen.

Para ver el curso completo

El modelo CSS Flexbox está empezando a experimentar un uso mucho más amplio y en estos momentos lo soportan todos los navegadores principales. En el curso completo, 6 Proyectos Flexbox para Diseñadores Web, nos basaremos en mi anterior curso CSS: Aspectos Esenciales de Flexbox para definir seis proyectos básicos de CSS que pudemos utilizar en nuestro día a día.

También hemos desarrollado una guía comprensiva para ayudarte a aprender CSS en línea, tanto si sólo estás empezando con los aspectos básicos como si quieres explorar un CSS más avanzado. Échale un vistazo a Aprende CSS: La Guía Completa.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.