Como centrar un texto mediante CSS y no con HTML

Como centrar un texto mediante CSS y no con HTML

Print Friendly, PDF & Email
Como centrar un texto mediante CSS y no con HTML
Valora esta entrada
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!

Entradas relacionadas:

Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 40
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
La propiedad overflow
- 16
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 57
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
Diferencia entre visibility:hidden; y display:none;
- 35
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Box Sizing, como modificar el modelo de cajas convencional
- 78
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Introducción al CSS. Que significa Cascading Style Sheets.
- 136
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Factores que afectan al tiempo de carga de una página web
- 256
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 247
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Ejemplo de centrado horizontal de una caja con CSS
- 236
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Unidades de medida absolutas y relativas en CSS
- 167
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

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.