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 un comentario

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

Información básica sobre protección de datos Ver más

  • Responsable Juan Antonio Muñoz Castro .
  • Finalidad Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios SERED.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Ir arriba
Esta web utiliza cookies, puedes ver aquí la Política de Cookies