margin: 0 auto 0 auto;

kadas99 · #1 (**permalink**) 05/04/2010, 08:38

Buenas, en casi todas las paginas que pruebo usando el margin: 0 auto 0 auto me alinea al centro todo el contenido usandolo indistintamente en la etiqueta body o creando algun contendor. El problema ahora es que no me funciona esa propiedad, no se si la estoy tapando con algun otro margin o que, pero la verdad no entiendo que peude ser, les muestro el codigo a ver si tiene alguna idea de lo que puede estar pasando.

Este es el css:

Código:

<style type="text/css">



#arriba{
background-image:url(diseno/fondo/ajeneski_03.png);
width:795px;
height:324px;
}

#medio{
background-image:url(diseno/fondo/mjeneski_05.png);
width:797px;
height:79px;
}

#abajo{
background-image:url(diseno/fondo/abjeneski_07.png);
width:797px;
height:69px;
}

#diseños{

font-family:"Westwood LET";
font-weight:100;
margin-top:0px;
margin-left:90px;
}


#estilos{
font-family:"Westwood LET";
font-weight:100;
margin-left:630px;
margin-top:-140px;
}

#muestras{
margin-top:-50px;
margin-left:250px;
background-image:url(diseno/extras/jeneski_03.png);
width:330px;
height:138px;
}

</style>

Este es el Html

Código:

<body>
<div id="contenedor">
<div id="arriba">
<h1 id="diseños">paginas</h1>
<div id="muestras">
</div>
<h1 id="estilos">estilos</h1>
</div>
<div id="medio">
</div>
<div id="abajo">
</div>
</div>
</body>

Espero que me puedan ayudar!
Un abrazo!

Impostor · #2 (**permalink**) 05/04/2010, 08:49

Buenas,

o yo me estoy volviendo loco o no has puesto margin: 0 auto; en ningún momento en el código que muestras.

Saludos¡¡

kadas99 · #3 (**permalink**) 05/04/2010, 10:40

jaja, no estas loco, no lo puse en el foro, pero probando localmente si lo puse.

De esta forma:
body{
margin: 0 auto 0 auto;
}

y tambien asi:
#contenedor{
margin: 0 auto 0 auto;
}

y creando el respectivo:
............<div id="contenedor">TODO EL CONTENIDO DE LA PAGINA</div>...........

y no funciona.

comablck · #4 (**permalink**) 05/04/2010, 11:12

Para q te funcione el margin 0 auto.. debes ponerle al div contenedor un width especifico, sino no te lo alinea al centro.

kadas99 · #5 (**permalink**) 06/04/2010, 05:31

Chicos, desde ya gracias por las respuesta y el interes en ayudar, siempre hay que rescatar lo bueno de las cosas!

Cita:

Iniciado por comablck

Para q te funcione el margin 0 auto.. debes ponerle al div contenedor un width especifico, sino no te lo alinea al centro.

luego de leer esto me dije: "pero que bolu_ _ que soy, no le puse width! ¿O si?" ante la duda lo volvi a probar y tampoco me fuinciono, hice esto asi:

Css

Código:

#contenedor{
margin:0 auto 0 auto;
width:100%; // o width: 797px;
}

Html

Código:

<div id="contenedor">Contenido</div>

y tampoco funciono, pero lo raro es que en cuando llevue ese margin a los ID=Arriba, Medio y Abajo si me los alineo de forma correcta!

Css

Código:

#arriba{
margin:0 auto 0 auto;
background-image:url(diseno/fondo/ajeneski_03.png);
width:795px;
height:324px;
}

#medio{
margin:0 auto 0 auto;
background-image:url(diseno/fondo/mjeneski_05.png);
width:797px;
height:79px;
}

#abajo{
margin:0 auto 0 auto;
background-image:url(diseno/fondo/abjeneski_07.png);
width:797px;
height:69px;
}

Asi que esa fue la forma en que lo solucione, pero no se si es la mejor.

Un abrazo y gracias por todo!

Impostor · #6 (**permalink**) 06/04/2010, 06:45

Buenas,

pues es raro, yo añadiendo

Código CSS:

Ver original#contenedor{
margin:0 auto;
width: 800px;
}

funciona perfectamente.

Por cierto, margin: 0 auto 0 auto; se puede poner simplemente como margin: 0 auto; te quedará un código mas limpio.

Saludos¡¡

kadas99 · #7 (**permalink**) 06/04/2010, 07:54

La verdad es que voy a ver mejor el codigo porque en otras paginas que estoy armando me funciona de la misma forma que me indicas vos.

sobre lo de margin:0 auto; lo habia notado hace tiempo, pero por costumbre lo sigo utilizando de la otra forma, veo que ya es hora en innovar!

Muchas gracias nuevamente!

VirtualWork · #8 (**permalink**) 06/04/2010, 09:43

Hola!!!

Tal vez el problema pueda ser porque no tienes float:left;. A mi a veces me molesta por esto, y toca colocarselo a todos los divs

Impostor · #9 (**permalink**) 06/04/2010, 09:51

Cita:

Iniciado por VirtualWork

Hola!!!

Tal vez el problema pueda ser porque no tienes float:left;. A mi a veces me molesta por esto, y toca colocarselo a todos los divs

¿y que sentido tiene poner float: left; para centrar un div?

Saludos¡¡

alexk · #10 (**permalink**) 06/04/2010, 09:57

aver antes que le digamos mil y un propiedades en CSS...
kadas99
en tu HTML tienes el Doctype???

kadas99 · #11 (**permalink**) 06/04/2010, 10:18

Sip. siempre tengo el Doctype

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
</body>
</html>

jomaruro · #12 (**permalink**) 06/04/2010, 15:02

Hola:

Cita:

Iniciado por Impostor

¿y que sentido tiene poner float: left; para centrar un div?

¿Será para centrarlo a la izquierda o para flotarlo al centro?

Saludos.

Impostor · #13 (**permalink**) 06/04/2010, 15:09

Cita:

Iniciado por jomaruro

¿Será para centrarlo a la izquierda o para flotarlo al centro?

:

Pues estaré hoy algo corto, pero para centrar flotar a la izquierda sigo sin entenderlo.

Lokocr · #14 (**permalink**) 06/04/2010, 16:35

Cuando le das un Width de 100% o auto, la propiedad de Margin: 0 auto; no se aplicara, debido a que no tiene un tama definido.

Si sigues con ese problema solo nos avisas.

Shawnsita · #15 (**permalink**) 08/04/2010, 16:02

Hola que tal

tengo un problema muy similar al comentado, tengo el siguiente código

y este es el css

#container {
width: 900px;
margin: 0px auto;
height:528px;

}
#login_main
{
width: 900px;
height: 400px;
}
.Login1
{

}

Pero me sigue manteniendo todo lo que hay en el div Login_main a la izquierda :S

Alguna sugerencia ?

jomaruro · #16 (**permalink**) 10/04/2010, 04:53

Hola:

Esto no es del todo exacto.

Cita:

Iniciado por Lokocr

Cuando le das un Width de 100% o auto, la propiedad de Margin: 0 auto; no se aplicara, debido a que no tiene un tama definido.

Tamaño definido si lo tiene, el 100%, el problema de que no lo centre es ¿Cómo centras algo que ocupa TODA la pantalla?

Saludos.

surWebStudio · #17 (**permalink**) 10/04/2010, 16:33

hola como estas Shawnsita proba poner

#container {
position:absolute;
width: 900px;
height:528px;
left:50%;
margin-left:-450px;
}

espero te sea de ayuda, avisame si te funciono.