Como centrar un texto mediante CSS y no con HTML

Como centrar un texto mediante CSS y no con HTML

5
(2)

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:

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 &nbsp; (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>
Como centrar un texto mediante CSS y no con HTML 1
Como centrar texto con css y no con 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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 2

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

4 Comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.