Como centrar un texto mediante CSS y no con HTML

4.1
(14)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

centrado texto css

[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:

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
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!

  1. Avatar de Oscar Fiblas Aramayo
    Oscar Fiblas Aramayo

    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?

    1. Avatar de Francesc Ricart

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

  2. Avatar de Lorem Ipsum
    Lorem Ipsum

    POR FAVOR, revise usted su ortografía.

    1. Avatar de Francesc Ricart

      ¡hola!
      gracias por tu comentario, es algo a revisar en toda la web en general. cualquier sugerencia concreta es bienvenida
      saludos,

  3. Avatar de Juan Antonio Muñoz Castro

    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.

    1. Avatar de Francesc Ricart

      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,

  4. Avatar de rengin
    rengin

    Muchas gracias por el script. Mientras somos novatos vivimos de los avanzados.

  5. Avatar de Favio Joel Zalazar
    Favio Joel Zalazar

    ¡Muchas gracias! era lo que estaba buscando

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *