Como centrar texto en HTML con CSS

Juan Antonio Munoz Castro - emoji con bus

¿Cual es la etiqueta HTML para centrar el texto?

Efectivamente existe una etiqueta que nos sirve para centrar el contenido que se encierre en su interior. El inconveniente de esta etiqueta es que está obsoleta, se puede usar pero lo correcto es usar la propiedad css “text-align: center;”​. os dejamos un ejemplo del uso de esta etiqueta HTML para centrar el texto:

See the Pen Centrar texto con etiqueta HTML by Juan Antonio Muñoz Castro (@colchonero82) on CodePen.dark

Ya sabemos lo que no hay que hacer jejejej ahora te voy a explicar un poco las etiquetas más comunes de HTML y como centrar el contenido en las mismas.

Etiquetas HTML que pueden contener texto

Vamos a ver….. como digo esto…. 🤔 🤔 🤔 🤔 🤔 TODAS! JAJAJAJAJAJ

Pues si, podemos meter texto literalmente donde nos de la gana, otra cosa es que eso esté bien o sea una buena práctica. Normalmente el texto irá dentro de un párrafo, título o tabla, y sobre estas etiquetas vamos a hablar aunque hay muchas más y el proceso para alinear el texto será el mismo que con estas.

Como ya sabemos un párrafo en HTML va encerrado entre las etiquetas <p> y </p>, los titulos entre <h?> y </h?> y en las tablas, dentro de su estructura, los textos van dentro de las etiquetas <th> y </th> para los titulos y <td> y </td> para las tablas del cuerpo.

¿Te lo enseño en un ejemplo que se verá mas claro?

See the Pen Alinear texto en html - Centrar, izquierda, derecha, justificado by Juan Antonio Muñoz Castro (@colchonero82) on CodePen.dark

Ahora Vamos a alinear los textos al centro, izquierda, derecha y justificado con CSS

Guay! ya tenemos claro que hay muchas etiquetas HTML que nos permiten mostrar texto en diferentes formatos por pantalla. Ahora vamos a mostrarlo en las diferentes alineaciones. Para ello aprovechando el ejemplo anterior vamos a ordenar las diferentes etiquetas alternando las posibilidades que tenemos para alinear el texto.

Para alinear el texto vamos a usar la propiedad css “text-align”, dándole los valores “left, right, center o justify” dependiendo de donde queramos alinear el texto.

Doy por sentado que sabes como añadir código CSS, no obstante quiero recordarte que en WordPress casi todos los temas traen un apartado para añadir código CSS y, en caso de no tenerlo, también disponen dentro de la carpeta del theme un archivo llamado style.css donde puedes añadir tus códigos CSS personalizados.

Ya sabemos centrar texto con HTML y como siempre vamos a darle una última vueltecita 😆

juan-antonio-Munoz-Castro---meta

Lo que hemos hecho en el ejemplo está muy bien pero es algo pesado a la hora de escribir código ya que para una “tontería” hemos hecho un mamotreto de código para flipar 😅😅😅.

En este último punto no podemos incluir la tabla ya que a esta si hay que especificarle la alineación que queremos para que la coja.

Lo que vamos a hacer es coger todas las etiquetas del ejemplo (h1, h2, div, etc) y las vamos a meter dentro de una caja con una clase determinada. En el CSS he metido 4 clases para poder alinear el texto, con lo que para poder alienar todo el contenido basta con cambiar el nombre de la clase a: centrar, izquierda, derecha o justificado.

En el cuadro de abajo puedes modificar el texto en vivo. Sólo tienes que cambiar donde pone class”centrar” y cambiar la palabra “centrar” por “izquierda, derecha o justificar” para ver los cambios!

See the Pen Alinear texto en html - Mejorando un poco el código by Juan Antonio Muñoz Castro (@colchonero82) on CodePen.dark

Pues hasta aquí hemos llegado en este post! espero que aunque sea básico y cortito te haya sido de utilidad si no sabias como alinear los textos de forma correcta en una web.

¡HASTA PRONTO!

FAQ - preguntas frencuentes

📌 ¿Como se puede centrar el texto en HTML?

Si necesitas centrar texto con html solo tienes que encerrar el texto con la etiqueta center, ahora bien.... ¿Es la mejor opcion? 🤔 Entra para saber la respuesta!

📌 ¿Es mejor centrar con HTML o usar CSS?

Cuestión de gustos 😜 como todo en esta vida! jejejej Mi opinión es que ya que cualquier web usa CSS para maquetarla queda todo más ordenado usando este método y asi dejamos el html para las clases e IDs.

📌 ¿Es mejor usar un div o un span para centrar el texto?

Da igual siempre que tengas claro que estás haciendo en cada momento. ⌚ Personalmente me gusta alinear los textos, ya sea al centro o en la dirección que sea, dentro de un DIV.

Deja una respuesta

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

Ver más

  • Responsable: Juan Antonio Muñoz Castro.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a SERED que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Ir arriba
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver Política de cookies
Privacidad