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

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

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

6 Comments
  • Oscar Fiblas Aramayo
    Posted at 15:43h, 27 septiembre Responder

    Gracias, 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?

  • Lorem Ipsum
    Posted at 00:20h, 17 octubre Responder

    POR FAVOR, revise usted su ortografía.

    • Francesc Ricart
      Posted at 00:25h, 17 octubre Responder

      ¡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 abril Responder

    Viendo 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 abril Responder

      Hola 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,

Post A Comment

  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.