Centrar un <div> contenedor

evoarte · #1 (**permalink**) 19/10/2005, 17:14

Buenas Noches:

Como se puede centrar un <div> contenedor, es decir, toda la página, y que sea compatible con todos los navegadores ?

<body>
<div id=contenedor>

[Aquí el contenido]

</div>
</body>

Cuales son las propiedades de estilo que debemos darle al <body> y al contenedor #contenedor, en la hoja de estilos para que el contenido de la pagina este siempre centrado independientemente del navegador y la resolución ?

Salu2.

RoQ · #2 (**permalink**) 19/10/2005, 17:37

dale un ancho al contenedor con width ej
width:700px;
luego le aplicas un margen 0 arriba y automatico a los lados
margin: 0 auto;

eso centrara el contenedor.

evoarte · #3 (**permalink**) 19/10/2005, 17:56

Gracias.

Salu2.

Rafael · #4 (**permalink**) 19/10/2005, 18:09

En Ie no funciona. Tal vez el típico

<body style="text-align: center;">
y luego un

<div style="width: 700px; text-align: left;">

con align left para contrarrestar el otro center.

ramm · #5 (**permalink**) 19/10/2005, 18:11

Exactamente, como te dice Rafael, asi aseguras que funcione en todos.

RoQ · #6 (**permalink**) 20/10/2005, 07:39

si funciona en IE, solo que debes usar un doctype adecuado no recuerdo si con html 4.01 funciona pero con Xhtml si lo hace

Rafael · #7 (**permalink**) 20/10/2005, 10:01

Ok, tendría que ser

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

Habá que provar en diferentes versiones de Ie. No sé desde cual acepta este doctype.

iconogt · #8 (**permalink**) 20/10/2005, 21:45

Pues dejen les cuento que yó también tuve ese problema, y aunque existen varios truquillos para poder centrar todo un bloque de contenidos, y he visto algunas de las formas de las cuales les comento. Está la manera de colocar un margin: auto a los lados izquierdo y derecho de la capa, o bien.. está la forma de colocar la capa con un posicionamiento absoluto y así irle dando la posición en top y left que querramos, pero.... después de tánto buscar, encontré una forma fácil de hacerlo y que hasta ahora lo he probado en firefox, IE, Netscape, Opera, y funciona perféctamente.. aquí se los dejo (es bien fácil no?)

Código:

<div align="center"><div id="encabezado"><!--  ojo, que esto lo que hace es centrar todo
lo que se encuentre dentro de él  -->
</div>
     <div id="contenido">mas contenido... cuerpo de la página</div>
<div id="pie">&copy</div>

        </div><!--  Cierrre de la capa que nos sirve para centra todo  -->

Bueno, espero les sirva de algo

Slds,

iconogt · #9 (**permalink**) 20/10/2005, 21:52

Ahhhh y por cierto no sé esto del DOCTYPE influya tanto, pero si de algo les sirve, yo lo hago TRANSITONAL.dtd y no he tenido problemas con eso...

Rafael · #10 (**permalink**) 21/10/2005, 19:05

El centrar con un div text-align center si funciona parejo, el que no sirve es el auto si no tiene el doctype adecuado. La realidad es que hay que ir usando el nuevo, aunque algunos nos malacostumbramos al comportamiento anterior.

Ahora hay que aprenderse nuevos hacks...

evoarte · #11 (**permalink**) 21/10/2005, 20:29

Con vuestros comentarios la forma en que lo he conseguido es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

Y en la hoja de estilos:

#contenedor{margin:10px auto;}

No hace falta ni centrar en cuerpo: body {text-align:center;}
Tampoco volver a alinear a la izquierda en el div contenedor: #contenedor{text-align:left}.

Lo he probado en IE, OPERA Y FIREFOX.

Salu2. Gracias.

iconogt · #12 (**permalink**) 24/10/2005, 13:08

Lo ven, ya hay nuevas opciones, (esa no me la sabía...)

evoarte · #13 (**permalink**) 24/10/2005, 19:13

Buenas noches ICONOGT:

Veo q tienes humor. Eso está bien. Gracias por tus respuestas.

Salu2.

iconogt · #14 (**permalink**) 24/10/2005, 19:39

Hola evoarte,

Con mucho gusto cuando quieras te ayudamos en lo que se pueda

Daniel M. · #15 (**permalink**) 22/11/2005, 14:29

No Es Mas Simple La Reglas * { Margin:opx Padding:0px} Y En El Contenedor Coloco Margin:o Auto Y Listo Calistocentrado Quedo, No Se Olviden Del Punto Y Coma Que No Encuentro En Mi Pc Sorry Pero Eso Me Soluciono El Problemas

RoQ · #16 (**permalink**) 22/11/2005, 14:40

el selector * es como un comodin, lo que haces al poner *{ Margin:0px Padding:0px;} es "resetar" los estilos del navegador, puesto que cada navegador le asigna un margen y padding por defecto a cada selectro (h1, h2, p, etc), el poner esa declaracion al inicio de tu hoja de estilo te asegura empezar con un diseño limpio, puesto que a cada selectro tu le daras tus propios margenes.
Lo que no entiendo es como eso te ayudo a centrar, puesto que con margin:0 auto; bastaba.

Y Por Favor Deja De Escribir Asi

yogiri · #17 (**permalink**) 22/11/2005, 16:18

Cita:

Iniciado por RoQ

Y Por Favor Deja De Escribir Asi

Je, no escribe asi... ha hecho algo peor, ha escrito todo en mayusculas y el foro automaticamente lo cambia.

malucha · #18 (**permalink**) 16/05/2006, 09:27

Yo ya he probado lo de los margins y no me funciona.
Os agradecería si pudiérais mirar que es lo que me falla, ya que en IE centra el contenedor correctamente, pero en cambio tanto en Opera como en Firefox pasan olimpicamente del tema.
Podeis mirar el código en: http://www.eurielle.net/pruebas
Ahí tenéis el código html, el css se llama conestilo.css

Ya estoy más que aburrida de probar cosas ¡y nada me funciona! no se que es lo que pasa. Os agradecería que me echárais una mano con la solución.

Gracias por vuestra ayuda!!

Hououji Ayumu · #19 (**permalink**) 16/05/2006, 17:04

saludos
pues ami la verdad no me funciona nada de lo que dicen aqui asi que para centrar todo lo que hago es ponerle las tags <center></center> al inicio y al final del documento html pero hace poco me digeron que eso no estava bien aun no se bien porque dicen eso pero como sea se me acaba de ocurrir otra manera de centrar todo aqui les pongo el ejemplo (los CSS no se los puse externos para que se mas rapido XD)

Código HTML:

<html>
<head>
<title>align center</title>
</head>
<body style='margin-left:0px; margin-right:0px; margin-top:0px;'>
<div  align="center" style='width:100%; border-width:1px; border:weight:0px; border-style:solid;'>
     <div style='position:relative; width:700px; height:600; border-width:1px; border-color:#00ff00; border-style:solid; text-align:left;'>
[Aquí el contenido]
     </div>
</div>
</body>
<html>

bueno la verdad creo que esto es lo que decean hacer o almenos este es el resultado no? en fin diganme ustedes si estoy mal u otra manera de conseguir el efecto deceado yo creo que la idea es centrar un documento con un width de 800 px en una pantalla de 1200px o mas
(por cierto yo solo uso el MSIE asi que no se como funcione en los otrs navegadores)

malucha · #20 (**permalink**) 17/05/2006, 01:34

Ya solucioné el problema. Gracias. De cualquier manera tu solución seguro que funciona.

El caso es que le había llamado en el html container, y en el css contenedor. Pero por extraño que parezca, había cosas del contenedor que me las aplicaba correctamente, aún sin tener el mismo nombre ¿extraño eh?

En fin, hay que fijarse más antes de molestar a los demás, siento haberos hecho perder el tiempo.

Gracias por todo :P

ASYNTETYCO · #21 (**permalink**) 15/09/2008, 09:42

Yo lo solucione poniendo el div contenedor en posicion absoluta y con left 0px y top 0px. Asi:

#CONTENEDOR {
width:100%;
height:100%;
position:absolute;
left: 0px;
top: 0px;
}

Y me funciono perfecto