¿Cómo centrar un texto con CSS?
En ocasiones queremos centrar un texto o un párrafo en un código HTML. Aunque algunos CMS tienen botones para alinear el texto a la izquierda, derecha, centro o justificarlo, al trabajar directamente con el código HTML y CSS, la tarea puede volverse un poco más complicada.
¿Cómo alinear un texto?
Si utilizamos un CMS como WordPress, Wix o cualquier otro, lo habitual es que tenga un botón para alinear el texto a la izquierda, a la derecha, al centro y para justificarlo, como sucede en Word o otros editores de texto similares. Estos botones se representan de la siguiente manera:
- Alinear texto a la izquierda:
- Alinear texto a la derecha:
- Alinear texto en el centro:
- Justificar el texto:
Hasta aquí todo muy fácil, pero cuando nos enfrentamos al código html e intentamos poner un text-align:center y no funciona comienzan las frustaciones. Por eso traigo varias formas de alinear un texto gracias a nuestro querido CSS.
¿Por qué a veces no funciona el text-align: center?
En ocasiones aunque hayamos establecido una clase con la propiedad text-align:center para el elemento que queremos centrar, este no centra correctamente. Esto puede deberse a varios motivos:
- El elemento que queremos centrar, no tiene un ancho definido: Para que la propiedad "text-align: center" funcione, el ancho debe estar definido.
- El elemento tiene un ancho máximo definido, es decir, que esté utilizando la propiedad "max-width".
- El elemento que contiene el texto tiene contenido flotante: El elemento tiene contenido flotante (por ejemplo, una imagen o otro texto superpuesto)
- El elemento que queremos alinear el en centro tiene un posicionamiento absoluto o fijo
- Hay una clase de CSS que afecta al elemento, que tiene definida una propiedad "text-align"
Como puedes comprobar hay muchas situaciones que pueden hacer que esta propiedad no funcione correctamente. Por eso he traido soluciones para todos los problemas.
En general, es importante asegurarse de que el elemento en cuestión tenga un ancho definido y no tenga otras propiedades que puedan afectar al centrado del contenido. Si el problema persiste, es posible que sea necesario utilizar otras técnicas de centrado, dependiendo de la estructura y el contenido del
Text align center
Si aplicas la propiedad CSS "text-align: center" a un elemento <p> o <span>, estás centrando el texto dentro de ese elemento.
Ejemplo:
<p style="text-align:center">Texto centrado</p>Text-align: center !important
En las ocasiones que tenemos muchas clases css establecidas para los contenedores de texto de nuestra web, es posible que alguna de estas clases tenga definido un "text-align:left" o "text-align:justify" y esto hace que aunque pongamos un <p style="text-align:center"></p> no surta nignun efecto. Siempre podemos crear una nueva clase css y añadirla en el contenedor pero es más sencillo forzarlo con un simple !important de esta forma:
Ejemplo:
<p style="text-align:center !important">Texto centrado</p>Margin: 0 auto
Otra forma de centrar un elemento o un texto es utilizando las propiedades "margin" y "auto". Para ello, el elemento debe tener un ancho definido y ser un elemento de bloque. De esta forma, le diremos al navegador que el margen izquierdo y derecho del elemento son iguales y que los calcule automáticamente.
Ejemplo:
<p style="width: 100%; margin: 0 auto">Texto centrado</p>Display: block y text-align: center
Otra forma que tenemos de centrar un elemento es mediante el uso de las propiedades "display" y "text-align". En este caso, el elemento debe ser un elemento de bloque y tener un ancho definido. La propiedad "display: block" se ocupa de que el elemento se adapte ocupando todo el ancho disponible, mientras que "text-align: center" centra el contenido dentro de ese ancho definido.
Ejemplo:
<p style="display: block; width: 50%; margin: 0 auto; text-align: center">Texto centrado</p>Justify-content: center
Si estamos trabajando con un elemento contenedor que contiene varios elementos en su interior, podemos utilizar la propiedad "justify-content" para centrar el contenido horizontalmente. Esta propiedad se utiliza en combinación con "display: flex". El contenido que está dentro del contenedor se alinea horizontalmente en el centro.
Ejemplo:
<p style="display: flex; justify-content: center">Texto centrado</p>Transform: translateX(50%)
Otra forma de centrar un elemento es utilizando la propiedad "transform". El elemento debe ser un elemento de bloque y tener un ancho definido. La propiedad "transform: translateX(50%)" desplaza el elemento horizontalmente en un 50% de su ancho, lo que lo centra horizontalmente.
Ejemplo:
<p style="display: block; width: 50%; margin: 0 auto; transform: translateX(50%)">Texto centrado</p>Display: inline
Por último, si queremos centrar un elemento en línea con otros elementos, podemos utilizar la propiedad "display: inline". Esta propiedad convierte el elemento en un elemento en línea, lo que permite alinearlo horizontalmente con otros elementos. Tiene la desventaja de que esta propiedad solo funciona con elementos que no son de bloque, como los elementos <span>.
Ejemplo:
<p style="display: inline; text-align: center">Texto centrado</p>¡Esto ha sido todo! Espero que estos trucos CSS hayan servido de ayuda.