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
- 178
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Guía rápida para crear botones personalizados con CSS
- 105
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Concepto de herencia en CSS
- 285
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Unidades de medida absolutas y relativas en CSS
- 324
¿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.
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 179
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
La propiedad overflow
- 118
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.
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 286
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Menú horizontal con submenú desplegable horizontal mediante CSS
- 168
Ejemplo de menú horizontal con submenú desplegable horizontal mediante CSS. Incluye archivo descargable.
Concepto de cascada en CSS
- 235
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
Dimensiones reales de una caja en CSS
- 202
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
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.