Propiedad left

[Vanessita]

Hola a todos,

Soy nueva en esto del diseño web y me he puesto a hacer algunas cosas para ir aprendiendo css.

Tengo un css como el siguiente:

Código CSS:

body {
margin: 0;
padding: 0;
}
 
#contenedor {
background-color: grey;
height: 665px; 
width: 768px; 
margin-left:auto; 
margin-right:auto;
}
 
.cajita {
border: 1px dashed;
overflow: hidden;
position: absolute;
height: 40px;
width: 120px;
left: 384px;
top: 50%;
margin-top: -20px;
}
 

Tengo un contenedor con un ancho de 768 px y dentro un div el cual estoy tratando de que quede justo en el centro de este contenedor.
Si al div que está dentro del contenedor le coloco un left de 384px (la mitad del ancho del contenedor), el mismo no se mueve justo a la
mitad, sino que he tenido que colocarle un left de 452px para que tenga el efecto deseado, entonces, quisiera saber o entender como es que
funciona el left en este caso.

Muchas gracias desde ya.

[Triby]

No uses posicionamiento, es mejor aplicar margen automático a derecha e izquierda:

margin:-20px auto 0 auto;

Y no entiendo para qué es el margen arriba en -20px.

[nanotime]

Correcto, no soy alguien muy ducho en esta parte aún, pero la mejor manera de centrar (y la que casi siempre funciona mejor) es denotando los márgenes laterales automáticamente, así el navegador calcula esos márgenes dependiendo del tamaño de su contenedor, ojo, del contenedor, no de la ventana del navegador ;)

[Vanessita]

Hola amigos,

Hice lo que me dijeron, sin embargo tengo un problema con el margen superior, ya que el contenedor también se está viendo afectado,
pueden verlo aquí:
http://jsfiddle.net/SbSBn/

No sé por qué pasa eso.

Saludos y gracias.

[Triby]

Lo dices por el fondo blanco que aparece arriba del fondo gris?

Es el comportamiento normal de los márgenes, los espacios "sin usar" no aplican el fondo del contenedor, por lo que tienes 4 opciones:

1- Aplicar el fondo directamente a body
2- Eliminar el margen superior de .cajita y aplicarlo como margen interior (padding) en #contenedor
3- Eliminar el margen superior de .cajita y colocar antes de este un elemento que tenga la altura que necesitas de separación
4- La menos adecuada, pero depende de lo que realmente quieres hacer: Recurrir nuevamente a posición absoluta

Si ninguna de las 3 primeras opciones te convence, cuéntanos exactamente lo que quieres y solo así te podremos sugerir algo más concreto.

[kervinojeda]

Según lo que entendí tu quieres centrar la cajita punteada en todo el centro del cuadrado gris no? si eso es lo que quieres hacer, prueba con esto: (esta es la única manera que yo conozco hasta ahora para hacer esto, quizás no sea la mejor, ya que yo también soy nuevo en esto, pero a mi me funciona).

#cajita {
position:absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
border: 1px dashed;
height: 40px;
width: 120px;
}

#contenedor {
position:relative;
background-color: grey;
height: 665px;
width: 960px;
margin:auto;
}

Lo del left es porque si divides la mitad del contenedor esto lo que hace es que a partir de 384 px es que empieza a colocar el otro div (cajita) y por eso no se ve centrado.

[Vanessita]

Hola a ambos,

Muchas gracias por sus respuestas, han sido muy ilustrativas.

kervinojeda, sí, lo que quiero es centrar la cajita en todo el centro del cuadrado, aquí hay dos formas más que conseguí hacerlo:

Forma 1:

Código:

body {
margin: 0;
}

#cajita {
position: absolute;
border: 1px dashed;
height: 40px;
width: 120px;
left: 419px;
top: 311.5px;
}

#contenedor {
position: relative;
background-color: grey;
height: 665px; 
width: 960px; 
margin-left:auto; 
margin-right:auto;
}

Forma 2:

Código:

body {
margin: 0;
}
		
#cajita {
position:absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
border: 1px dashed;
height: 40px;
width: 120px;
}

#contenedor {
position:relative;
background-color: grey;
height: 665px;
width: 960px;
margin:auto;
}

Iniciado por Triby

Lo dices por el fondo blanco que aparece arriba del fondo gris?

Es el comportamiento normal de los márgenes, los espacios "sin usar" no aplican el fondo del contenedor, por lo que tienes 4 opciones:

1- Aplicar el fondo directamente a body
2- Eliminar el margen superior de .cajita y aplicarlo como margen interior (padding) en #contenedor
3- Eliminar el margen superior de .cajita y colocar antes de este un elemento que tenga la altura que necesitas de separación
4- La menos adecuada, pero depende de lo que realmente quieres hacer: Recurrir nuevamente a posición absoluta

Si ninguna de las 3 primeras opciones te convence, cuéntanos exactamente lo que quieres y solo así te podremos sugerir algo más concreto.

Triby, eso de 'los espacios "sin usar" no aplican el fondo del contenedor' aplica sólo para el top? Lo pregunto porque probé con margin-left
y no sucede lo mismo.

Por otro lado, y aunque sé que depende de lo que se quiera hacer, ¿Por qué dices que la posición absoluta es la menos adecuada?

Saludos y muchas gracias.

[Triby]

Si solo vas a tener esa cajita, sin más elementos, entonces no habría problema con la posición absoluta, de hecho, me parecería lo más adecuado.

El problema del uso de posiciones viene cuando quieres acomodar o alinear varios elementos; creo que en un 99.9% de los casos se soluciona flotándolos a izquierda o derecha, de acuerdo a tus necesidades.