Como centrar un texto mediante CSS y no con HTML

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.

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.

O bien que en realidad si está centrado pero no te das cuenta respecto de que caja.

La instrucción CSS que debes usar es

text-align:center;

Veamos un ejemplo:

centrado texto css
Ejemplo de centrado de un texto mediante CSS

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

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
  • Oscar Fiblas Aramayo
    Publicado a las 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?

    • Francesc Ricart
      Publicado a las 20:56h, 27 septiembre Responder

      Hola Oscar,

      gracias por tu comentario!
      existen dos formas de centrar.

      la primera es con text-align:center;
      la segunda es con margin:0 auto;

      te propongo que encierres tu párrafo dentro de un div(por ejemplo) y pruebes con las dos opciones anteriores.
      si das estilos al div que contiene el párrafo entonces usa text-align:center.
      si das estilos directamente al párrafo entonces usa margin:auto;

      saludos,

  • Lorem Ipsum
    Publicado a las 00:20h, 17 octubre Responder

    POR FAVOR, revise usted su ortografía.

    • Francesc Ricart
      Publicado a las 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,

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.