Saltar al contenido

Centrar en HTML: Descubre la forma correcta de centrar texto en HTML

  • por

Muchas veces un desarrollador de HTML no sabe cuál es la forma correcta de centrar en HTML, si tienes esta duda has llegado al lugar correcto, es muy importante respetar los últimos estándares HTML para que nuestro trabajo perdure en el tiempo y no se desactualice en un par de años. Además los buscadores como Google, Yahoo! y Bing dan preferencia a los sitios web que respetan los estándares oficiales de HTML.

Otra razón para que tengas el código correcto para centrar en HTML es que será 100% compatible con los navegadores más recientes como Google Chrome, Firefox e Internet Explorer.

Forma correcta de centrar en HTML

La forma de centrar que respeta los estándares es mediante CSS, por ejemplo se debe añadir style=»text-align:center» dentro de cualquier etiqueta HTML.

Para un centrar un párrafo tendríamos el siguiente código html:

<p style=»text-align:center»>Hola como estás, espero que muy bien porque yo se que ayer estuviste recibiendo un bonito regalo en tu trabajo. Bueno me despido, espero que el texto de este párrafo quede bien centrado y sobre todo que respete los estándares HTML.</p>

Este es el resultado:

Hola como estás, espero que muy bien porque yo se que ayer estuviste recibiendo un bonito regalo en tu trabajo. Bueno me despido, espero que el texto de este párrafo quede bien centrado y sobre todo que respete los estándares HTML.

Cómo centrar una imagen correctamente en HTML

Las imágenes centradas le dan un toque más profesional a nuestra páginas web, además siempre es conveniente agregar los atributos ALT y TITLE para mejorar el posicionamiento SEO y la experiencia del usuario respectivamente.

Este es el código para insertar una imagen centrada correctamente en una página web:

<img style=»text-align:center» src=»http://direccion.com/imagen.jpg» alt=»Como enamorar a una mujer amable» title=»Imagen de una mujer amable» />

Y este es el resultado:

Cómo centrar una tabla en HTML

Si quieres centrar un tabla en html, también necesitas usar el código Style o un Hoja de estilo en cascada o CSS (Cascade Style Sheet) por sus siglas en inglés.

Este es el código html para centrar correctamente una tabla:

<div>

<table style=»text-align:center»>

<!–contenido de la tabla–!>

<table>

</div>

Este es el resultado:

Nombre Apellidos
Juan Román Riquelme
Alan Brito Grueso

Código que se debe evitar para centrar en HTML

El código erróneo que muchos utilizan para centrar texto o tablas o imágenes en html es el siguiente:

<center>Hola como estas, espero no del todo mal. Por la experiencia de haber nacido, tu no</center>

Conclusiones y recomendaciones

Es muy importante centrar correctamente el texto, las imágenes y las tablas en HTML, para mejorar la compatibilidad con los motores de búsqueda y los navegadores web, si en tu sitio tienes muchos elementos para centrar debes crear una hoja CSS, con el nombre «style.css» y el siguiente contenido:

.centrado {

text-align: center;

}

Y en tu página web simplemente agregas lo siguiente en cada etiqueta que quieras centrar:

<p class=»centrado»>Hola</p>

<img class=»centrado»…

<table class=»centrado»…

Esto ayuda a actualizar más fácilmente el contenido de una página web, recuerda que HTML es solo para datos y CSS es solo para presentación.

No olvides visitar nuestra página de Regalos para tu página web donde te presentaremos muchas sorpresas totalmente gratis.

Deja una respuesta

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