Foros del Web » Creando para Internet » CSS »

Centrar un <div> contenedor

Estas en el tema de Centrar un <div> contenedor en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/10/2005, 18:14
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 15 años, 4 meses
Puntos: 2
Centrar un <div> contenedor

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.
  #2 (permalink)  
Antiguo 19/10/2005, 18:37
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
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.
  #3 (permalink)  
Antiguo 19/10/2005, 18:56
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 15 años, 4 meses
Puntos: 2
Gracias.

Salu2.
  #4 (permalink)  
Antiguo 19/10/2005, 19:09
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
En Mozilla si, Ie no

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.
  #5 (permalink)  
Antiguo 19/10/2005, 19:11
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
Exactamente, como te dice Rafael, asi aseguras que funcione en todos.
  #6 (permalink)  
Antiguo 20/10/2005, 08:39
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
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
  #7 (permalink)  
Antiguo 20/10/2005, 11:01
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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.
  #8 (permalink)  
Antiguo 20/10/2005, 22:45
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola a todos (as)

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,
__________________
_______
Jorge Rojas.

Última edición por iconogt; 20/10/2005 a las 22:47 Razón: Me faltó resaltar una parte del código
  #9 (permalink)  
Antiguo 20/10/2005, 22:52
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
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...
__________________
_______
Jorge Rojas.
  #10 (permalink)  
Antiguo 21/10/2005, 20:05
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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...
  #11 (permalink)  
Antiguo 21/10/2005, 21:29
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 15 años, 4 meses
Puntos: 2
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.

Última edición por evoarte; 24/10/2005 a las 20:11
  #12 (permalink)  
Antiguo 24/10/2005, 14:08
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Lo ven, ya hay nuevas opciones, (esa no me la sabía...)
__________________
_______
Jorge Rojas.
  #13 (permalink)  
Antiguo 24/10/2005, 20:13
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 15 años, 4 meses
Puntos: 2
Buenas noches ICONOGT:

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

Salu2.
  #14 (permalink)  
Antiguo 24/10/2005, 20:39
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola evoarte,

Con mucho gusto cuando quieras te ayudamos en lo que se pueda
__________________
_______
Jorge Rojas.
  #15 (permalink)  
Antiguo 22/11/2005, 14:29
Avatar de Daniel M.  
Fecha de Ingreso: julio-2005
Ubicación: Lima Perú
Mensajes: 108
Antigüedad: 12 años, 5 meses
Puntos: 0
nO ES MAS SIMPLE LA REGLA *

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
  #16 (permalink)  
Antiguo 22/11/2005, 14:40
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
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
  #17 (permalink)  
Antiguo 22/11/2005, 16:18
 
Fecha de Ingreso: noviembre-2005
Mensajes: 21
Antigüedad: 12 años
Puntos: 0
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.
  #18 (permalink)  
Antiguo 16/05/2006, 10:27
Avatar de malucha  
Fecha de Ingreso: abril-2005
Mensajes: 70
Antigüedad: 12 años, 8 meses
Puntos: 0
Pregunta

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!!

  #19 (permalink)  
Antiguo 16/05/2006, 18:04
Avatar de Hououji Ayumu  
Fecha de Ingreso: junio-2005
Ubicación: Queretaro Mexico
Mensajes: 73
Antigüedad: 12 años, 6 meses
Puntos: 1
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)
__________________
Sayounara
  #20 (permalink)  
Antiguo 17/05/2006, 02:34
Avatar de malucha  
Fecha de Ingreso: abril-2005
Mensajes: 70
Antigüedad: 12 años, 8 meses
Puntos: 0
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
  #21 (permalink)  
Antiguo 15/09/2008, 10:42
 
Fecha de Ingreso: abril-2008
Ubicación: Oaxaca
Mensajes: 256
Antigüedad: 9 años, 7 meses
Puntos: 2
Respuesta: Centrar un <div> contenedor

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
__________________
o x í g e n o | E S T U D I O
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:22.