Centrar texto con CSS en tu página web

27/Jun/2007 CSS , 16 Comentarios

Una de las cosas más sencillas cuando queramos dar formato al texto será la de centrar el texto. Esto era más o menos sencillo en HTML mediante la etiqueta center. Si bien, esta etiqueta quedo obsoleta con la llegada de las hojas de estilo CSS.

En CSS aparece una propiedad que se denomina text-align, la cual nos permitirá alinear el texto en la posición que necesitemos. En el caso que queramos tenerlo centrado el valor a asociar es "center".

Lo que tendremos es que definir una clase con esta propiedad. Por ejemplo, como la que sigue:

  1. <style type="text/css">
  2. .centrado{
  3. text-align:center;
  4. }
  5. </style>

Ahora solo nos quedará aplicarlo al texto. Para aplicar un estilo hay que utilizar el atributo class de un elemento HTML.

Para nuestro ejemplo hemos utilizado un elemento p, el cual representa a un párrafo:

  1. <p class="centrado">Texto centrado</p>

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

16 comentarios en “Centrar texto con CSS en tu página web”

Víctor Cuervo

Miguel Alfredo Tovar

Muchas gracias por tus orientaciones, son muy eficientes. saludos

Víctor Cuervo

Víctor Cuervo

Nos alegra mucho escuchar eso Miguel. Esperamos seguir aportando orientaciones con nuevos ejemplos. Gracias!

Víctor Cuervo

jessica hruerta apanco

todo esra clar muchas gracias `por su ayuda TENKIYO CHAU CHAU

Víctor Cuervo

Víctor Cuervo

@Felipe Sipion Fiestas,

Si pones el código:

<p style=”text-align:center;”><canvas height=”300px” width=”300px” id=”micanvas”>
Su navegador no soporta en elemento CANVAS</canvas></p>

El canvas te sale centrado.

Saludos.

Víctor Cuervo

Felipe Sipion Fiestas

necesito centrar un par de etiqueta que en realidad es un de html5, lo necesito hacer esde hoja de estilo pero no se me posiciona con nada!!

Víctor Cuervo

Víctor Cuervo

@Gutenberg,

Me alegro que te haya gustado. 😀

Víctor Cuervo

Gutenberg

Gracias =)

Víctor Cuervo

Sofia

Haha! estte como e hacee ?
eskee no me he enterado de muxo xDD

Víctor Cuervo

Diana

SII si ia oi sii ia pz! fijO cntradOoo juju

Víctor Cuervo

Diana

.centrado{text-align:center;}
juju sii funsionaa!:D moa loz qiiero dianaa juju

Víctor Cuervo

ivan

kiero centrar mi hi5

Víctor Cuervo

estuardo

como hago para centrar mis comentarios??

Víctor Cuervo

veronika

kiero centar mi hi5

Víctor Cuervo

lizet

kierO centrar mi hi5 peor dlargo pues no asi como etsa kOn ese codigo si no d eotra maneraq sea largo

Víctor Cuervo

Emilio

oye, quisiera saber, si puedes ayudarme en un problema q tengo, ya hice una pag web, es centrada, al igual q la tuya, cuando la acceso localmente c ve bien, pero cuando la subo ainternet, c desconfigura, la cabecera, menu, el cuerpo y el final c corren hacia el lado izquierdo, pero solo en el Internet Explorer, d antemano gracias.

Víctor Cuervo

cOx

muii buen aporte man
me zirvio

graziaz…

http://oOAlVaRoOo.hi5.com

comentenme =$

Los comentarios están cerrados.