[vc_raw_html]JTNDYXVkaW8lMjBjb250cm9scyUyMHNyYyUzRCUyMiUyRndwLWNvbnRlbnQlMkZ1cGxvYWRzJTJGYXVkaW8lMkZhdWRpby1jc3MlMkZjb21vLWNlbnRyYXItdGV4dG8taHRtbC5tcDMlMjIlM0UlM0MlMkZhdWRpbyUzRQ==[/vc_raw_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!
Deja una respuesta