Este post va a ser más corto de lo habitual pero no por ello menos útil. Muchas veces tenemos la necesidad de alinear los textos en nuestra pagina web ya sea izquierda, derecha, centrado o justificado. Vamos ha ver como centrar texto en HTML de forma rápida y fácil.
¿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.
See the Pen Alinear texto en html - Centrar, Derecha, Izquierda y Justificado by Juan Antonio Muñoz Castro (@colchonero82) on CodePen.
Ya sabemos centrar texto con HTML y como siempre vamos a darle una última vueltecita 😆
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.
