Ayuda con vertical-align

Tomillo · #1 (**permalink**) 15/01/2007, 16:47

Hola, estoy tratando de ordenar una capa dentro de otra.. lo que yo quiero es que la capa de adentro, se alinie verticalmente en el medio de la otra capa, en el css le puse vertical-align:middle, pero no funciona.

Como veo medio dificil que me ayuden a lo ciego, les paso los archivos.

http://download.yousendit.com/213D4A393848B9F9

Mi otra pregunta, es si hay alguna manera de que la pagina se vea igual en firefox y en explorer (miren y comprueben que no se ven igual)

Estoy empezando con CSS, disculpen mi ignorancia, les agradeceria su ayuda!

saludos

bhagat · #2 (**permalink**) 18/01/2007, 10:51

Hola Tomillo

Cita:

en el css le puse vertical-align:middle, pero no funciona.

Es que no exsiste ese atributo para CSS, eso es código para tablas.

para lograr eso tienes que insertar margin-top: auto; margin:bottom:auto puesto que auto es lo que hace centrarse.

Tambien se puede escribir en una sola linea, como ya lo tienes en el div contenedor de tu CSS.
por ejemplo

margin: auto 10px auto 15px; ( lo lee en este orden top, right, bottom, left) ,así por ejemplo quedaría centrado verticalmente (top y bottom auto) , 10 px de margen derecho y 15 px de margen izquierdo.

Se puede simplificar aun mas pero si lo escribes así funcionará siempre y podras manejar mejor los diferentes margenes.

espero que te sirva

Mikmoro · #3 (**permalink**) 18/01/2007, 11:19

La forma que yo uso para centrar algo verticalmente, suponiendo que se conozca el tamaño exacto de la caja, es la siguiente:

- se asigna a la caja interior un desplazamiento superior del 50%, con lo que conseguimos que el borde superior de esa caja quede en el centro exacto.
- ahora le damos un margen superior negativo igual a la mitad del tamaño de la caja interior, de manera que se deplaza hacia arriba la mitad de su tamaño, con lo que tenemos el centro de la caja interior situado en el centro de la caja exterior (contenedora).
Te pongo un ejemplo de centrado horizontal y vertical al mismo tiempo:

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=iso-8859-1" />
  <title>Caja interior centrada</title>
  <style type="text/css">
  #caja1 { width: 200px;
    height: 200px;
    position: relative;
    background-color: rgb(51, 153, 153);
    }

  #caja2 { width: 100px;
    height: 100px;
    top: 50%;
    margin-top: -50px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    background-color: rgb(102, 204, 204);
    }
  </style>
</head>
<body>
<div id="caja1">Caja exterior
<div id="caja2">Elemento interior</div>
</div>
</body>
</html>

Mikel.

bhagat · #4 (**permalink**) 18/01/2007, 12:12

también tienes esta opción

http://www.webmasterlibre.com/2006/0...ss-2-vertical/

Tomillo · #5 (**permalink**) 25/01/2007, 23:03

Muchas gracias Mikmoro, me funciono con tu manera

Gracias de todos modos bhagat, tambien me sirvio de ayuda!

Tomillo · #6 (**permalink**) 26/01/2007, 13:37

Y ahora como puedo hacer para que cuando achico el navegador, que la caja (las dos segun el ejemplo de Mikmoro) quede fija, y no se mueva, probe con todas las posiciones de "position" pero no logro arreglar eso.

Aqui les paso el codigo..

Código HTML:

<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>

<style type="text/css">
#banner_fondo1 {
	float:right;
	width: 498px;
    height: 100px;
	position:absolute;
    background-image:url(../images/banner_fondo.gif);
	right: 50px;
	top: 6px;
}

#banner_fondo2 {
	width: 468;
    height: 60;
    top: 50%;
    margin-top: -30px;
    position: absolute;
    left: 50%;
    margin-left: -235px;
}

#logo {
	float:left;
	width:98px;
	height:105px;
	padding-left:100px;
	position:absolute;
}
</style>
</head>

<body>
<div id="logo">
<img src="images/logo.gif" width="98" height="105" /></div>
<div id="banner_fondo1">
<div id="banner_fondo2">
<img src="images/banner_c_unit3.gif" width="468" height="60" /></div>
</div>
</body>
</html>

Prueben achicar el navegador y veran que la caja se va a superponer al logo, yo lo que quiero es que en ningun momento se mueva la caja al achicar el navegador.

Saludos

Mikmoro · #7 (**permalink**) 26/01/2007, 15:27

Es sencillo: si marcas una distancia del lado derecho y esa distancia es fija, cuando reduces el navegador la caja siempre se mantiene a la misma distancia de la derecha, y por eso es empujada.
Sin embargo, si marcas la distancia de la izquierda, esa también será fija, y aunque reduzcas el navegador siempre se mantendrá, por lo que nunca se acercará al logo.
Prueba con esto:

#banner_fondo1 { width: 498px;
height: 100px;
position: absolute;
background-image: url(../images/banner_fondo.gif);
top: 6px;
background-color: rgb(102, 204, 204);
left: 450px;
}

Al estar en posición absoluta el float right no le hace nada, así que lo he eliminado, y he cambiado el right: 50px por left: 450px, que viene a ser muy parecido en tu caso (prueba hasta encontrar el sitio a tu gusto).

Ya me dirás qué tal.

Mikel.

papitorico6969 · #8 (**permalink**) 28/10/2011, 18:58

Hola a todos, despues de quemar pestañas, llege a la solucion
1.- dentro del cuadro de dialogo de editar la regla, la primera opcion es TYPE (TIPO) y dentro de esta opcion hay un casillero que dice LINE -HEIGHT, ahi escribes el MISMO ALTO QUE PUSISTE A TU DIV y listo sea texto o imagen se centrara , es decir funcionara tu VERTICAL-ALIGN:MIDDLE
suerte a todos