16 Sep Como centrar un texto mediante CSS y no con HTML
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera.
La forma correcta de hacerlo es mediante CSS.
En esta breve entrada se explica como hacerlo y algunos errores comunes que no debemos cometer.
Atención: En esta entrada se trata el CENTRADO HORIZONTAL.
Si lo que te interesa es el CENTRADO VERTICAL + CENTRADO HORIZONTAL entonces consulta estas entradas:
- Diferencias entre centrados de textos y de cajas en css
- Ejemplo de centrado horizontal y vertical de una caja
- Estrategias para el centrado vertical de un contenido.
Bien, ¿entonces convencido de que vamos a centrar texto y no cajas?
Sigamos con la lectura.
Como no centrar un texto
- Elimina de tu mente la etiqueta <center>. Esta etiqueta se considera deprecated en html5.
- Descarta también la opción de hacer espacios en blanco para centrar el texto manualmente. Esta opción tiene 2 inconvenientes:
- Si te modifican el ancho disponible de pantalla tu texto dejará de estar centrado.
- Recuerda que en html 2 espacios en blanco se cuentan como uno. En su lugar deberías escribir (Revisa el tutorial html si no sabes a que me refiero)
En general las 2 opciones anteriores denotan un mal maquetador/programador. No te conviertas tu en uno de ellos y empieza a hacer las cosas bien.
Como si centrar un texto y porqué a ti no se te centra.
La razón habitual por la cual no se te centra un texto es porqué el elemento que estás intentando centrar es su elemento contenedor y no el texto en si. Más concretamente estás pensando en la instrucción
margin:auto;Pero esta no es la instrucción que debes usar porqué está centrando la caja pero no su contenido.
Otra razón habitual es que si estás centrando el texto pero no te das cuenta respecto de que caja.
La instrucción CSS que si debes usar es
text-align:center;Veámoslo mejor con un ejemplo.
Ejemplo de como centrar y como no centrar texto
Dado el siguiente código html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="https://francescricart.com/tutorial-css/"/>
<title>Cómo si centrar un texto</title>
<style>
.centrado{text-align:center;border:1px dotted #000; padding:8px;}
div{width:50%;border:1px dotted #f00;padding:8px;margin:auto;}
center{margin:16px 0;}
</style>
</head>
<body>
<p class="centrado">texto centrado</p>
<div>
<p>Un texto <u>no</u> centrado dentro de un div centrado</p>
</div>
<center>Una práctica obsoleta con <center></center>
</body>
</html>
En el ejemplo se muestran tres casos:
- En primer lugar un párrafo. El párrafo es un elemento bloque que ocupa todo el ancho del documento que pueda. Va de lado a lado y con la instrucción text-align:center el texto queda perfectamente centrado.
- En segundo lugar un párrafo atrapado dentro de un div. El div está centrado pero el texto en su interior no.
- En el tercer caso un ejemplo de la etiqueta deprecated <center>.
¡Hola!
Querido lector,
Espero que esta entrada te ayude a solucionar aquellos pequeños problemas que no te permiten avanzar.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Oscar Fiblas Aramayo
Posted at 15:43h, 27 septiembreGracias, pero a veces se necesita centrar el bloque contenedor (párrafo, div, etc.) y no el contenido (texto, imagen). Por ejemplo, centrar un bloque párrafo y dentro de él, justificar su texto. ¿Una posible solución?
Francesc Ricart
Posted at 20:56h, 27 septiembreHola Oscar,
gracias por tu comentario!
las trato en otras publicaciones del tutorial pero siguiendo tu comentario dejo algunos enlaces y actualizo la publicación:
saludos,
Lorem Ipsum
Posted at 00:20h, 17 octubrePOR FAVOR, revise usted su ortografía.
Francesc Ricart
Posted at 00:25h, 17 octubre¡hola!
gracias por tu comentario, es algo a revisar en toda la web en general. cualquier sugerencia concreta es bienvenida
saludos,
Juan Antonio Muñoz Castro
Posted at 02:59h, 25 abrilViendo el post veo que se te ha olvidado una propiedad que creo a muchos puede servir para alinear el texto de forma rápida y efectiva, la propiedad que explico es align=»center», por ejemplo. Mediante esta propiedad podemos alinear cualquier etiqueta típica sin usar CSS.
Francesc Ricart
Posted at 23:43h, 25 abrilHola Juan,
Gracias por tu comentario. Fíjate que este escrito se llama como centrar con css y no con html
En tu entrada hablas de la etiqueta center que está obsoleta y no se recomienda usar (lo menciono expresamente en el post)
De tu blog si extraigo la idea de centrar un texto poniéndolo dentro de una tabla, aunque me parece demasiado trabajo y súper obsoleto. En este punto es verdad que no lo menciono pero precisamente lo preferible es hacerlo con css y no con html.
saludos,
rengin
Posted at 04:51h, 10 julioMuchas gracias por el script. Mientras somos novatos vivimos de los avanzados.
Francesc Ricart
Posted at 13:01h, 21 julioGracias a ti!
Favio Joel Zalazar
Posted at 00:28h, 24 febrero¡Muchas gracias! era lo que estaba buscando
Francesc Ricart
Posted at 08:46h, 29 junio¡Muchas gracias!