Centrar contenido de una Pagina con CSS
Ricardo Aroca | 26 de mayo de 2005 | 
30 comentarios
Centrar el contenido de una página en la pantalla es fácil de hacer utilizando tablas, pero sin ellas, es decir, usando CSS , la cosa es un poco misteriosa, sin embargo esta ultima opcion es la más elegante. El código es el siguiente.
< HTML >
<head>
<style type="text/css">
body{
text-align:center;
margin:0 auto;
}
#contenedor{
margin: 0 auto;
text-align:left;
width:70%;
}
</style>
</head>
<body>
<div id="contenedor">
el contenido de tu página acá
</div>
</body>
</HTML>
El DIV #contenedor es necesario para alinear el texto nuevamente a la izquierda, ya que en por la regla que dimos al body, el texto queda centrado.
Comentarios
Este codigo resulta solamente cuando se trabaja con paginas con css, no con un html normal?. Me gusto este sistema de Blog qe tienen en la pagina.-
Si, tienes razón. Esto funciona cuando utilizas CSS. La tendencia ahora es utilizar HTML para el contenido y CSS para darle la forma al contenido, tal como sucede en el ejemplo que se comenta aquí. Creo que mi siguiente post va a ser acerca de la transicion de HTML puro a HTML+CSS
El Css, es un sistema para mejoramiento de interfas para las paginas? Ej: Colores, letras, etc., pero esta forma nueva de trabao con CSS, es aplicable en todos los editores de HTML?
Al seguir leyendo e indagando en los Css aparece lo que es el Xhtml, y por lo tanto me da a entender que estas dos cosas deben ir juntas. Y a la par me hace salirme del HTML normal cierto?
CSS no es necesariamente para mejorar la interfaz de las páginas. CSS se creó para separar la parte gráfica del contenido. Antes se hacía todo junto en HTML, pero ahora con HTML o XHTML tu escribes el contenido y con CSS le das forma a ese contenido. XHTML es la última versión de HTML. Sucede que existe un lenguaje llamado XML, que es el estándar para el envío de datos a través de Internet. XHTML es la aplicación de XML al HTML.
Ese código sólo funciona en explorer, hay alguna forma de centrarlo para Firefox, Opera y Netscape?
Buen intento de spam ... El código funciona bien en los navegadores modernos, incluso en IE.
a mí me pasa peor que a carlo (y te juro por snoopy que no es spam).
puse en la página exactamente el código que está arriba (nvu le agrega un <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">)
y no me centra ni en ff ni en ie
:-(
se te ocurre por qué puede ser?
Este código es usado en todos los sitios que desarrollamos y funciona en IE, Firefox y Opera sin problemas.
no pensais que es más fácil poner la etiqueta <CENTER> al principio de la página y </CENTER> al final ....
no sé a mi me funciona
A mi no me funciona en mozilla tampoco y tampoco soy spam. Con respecto al está ya bastante caduco. Renovarse o morir!!!!
Tal vez les falte establecer un ancho para el div #contenedor.
Funciona en Firefox. Y es el mas utilizado ahorita. xD
Como se hace, para centrar la pagina con css... en la pantalla si quiero que el tamaño de la pagina sea de 640x420 px... ... gracias por su ayuda
A mi el align-text: center; dentro del estilo del body en mozilla no me funciona tampoco, y mi div contenedor tiene un ancho fijo. En el explorer si.
funciona perfectamente en todos los navegadoress!!!!
Que chimba men!! Funciona en todos los navegadores!!
el ejemplo funciona correctamente, lo que ocurre es que si tu primer tag no especifica ser strict o transitional (ver W3C) puedes tener problema en alguno de los navegadores.
Yo probé con
y me funciona
El ejemplo solo centra horizontalmente. ¿Hay alguna manera para hacerlo verticalmente? Gracias
El centrado vertical con CSS es un dolor de cabeza. Hay varias técnicas, la mayoría de las cuales no funciona en Internet Explorer. Tal como están las cosas ahora, sigue siendo más fácil hacerlo con una tabla.
Algunos links que te pueden ayudar:
Se agracede compadre, me funciono excelente este codigo.
10 El 09 de marzo de 2007 s2k escribió
no pensais que es más fácil poner la etiqueta al principio de la página y al final ....
no sé a mi me funciona
¡¡Esto es lo más genial que leí desde hace días para poder centrar las css que me tenían loco!! Flaco sos un genio...
Centrar el contenido de una pagina web es sencillo usando CSS, cumpliendo estandares y haciendo que funciones en todos los navegadores, en mi blog pueden ver los pasos necesarios para lograr esa solucion.
http://crea-t.net/blog/archives/7
Saludos cordiales
Como hago para q un div q mide ancho: 500px y alto:600px se centre verticalmente?? Horizontalmente ya lo hice, pero vertical?
Olas, bueno si funciona el codigo de arriba, pero para que lo haga correctamente en ie como en ff tenes que agregar esta linea:
Solo asi me funciono a mi, sin esta linea, solo se veia bien en ff.
Suerte !!!
Olas, bueno si funciona el codigo de arriba, pero para que lo haga correctamente en ie como en ff tenes que agregar esta linea:
Solo asi me funciono a mi, sin esta linea, solo se veia bien en ff.
Suerte !!!
Pues ami me funcionó lo de las etiquetas al inicio y fin de mi pagina tenia un buen tratando de centrar en iexplorer gracias por el tip
Hola me parece que con un codigo mas simple se logra lo mismo:
(todo el body)
CSS
#contenedor {width: 800px ; margin: 0 auto}
Muy bueno el blog.
Despues de 6 años del post lo revivo diciendo gracias!!!
Ahora obvio que con un poco menos de codigo lo podemos mejorar.
Me llevo lo ultimo.
Abrazo para todos.
Funciona. Muchas Gracias :)
