Centrado Vertical

Gustavo1973 · #1 (**permalink**) 01/04/2008, 14:15

Tengo una pagina con 2 objetos flash, insertados en un div cada uno, que a la vez tengo en otro div, asi

Cita:

El css es

Cita:

.body{background-image:url(fondo1.jpg);height:100%;position:relativ e}

Lo que quiero es que asi como se centro horizontalmente lo haga verticalmente, como puedo hacerlo???
Gracias

refineriaweb · #2 (**permalink**) 01/04/2008, 14:50

Prueba esto:

CSS:

Código:

.centrado { position: absolute; top:50%; left:50%; width:886px; margin-left:-443px; height:575px; margin-top:-287px; }

Envolver lo que quieras centrar dentro de:

<div class="centrado"></div>

Evidentemente, este es un ejemplo para un ancho y un alto centrado en función del tamaño: 886px (ancho) x 575 px (alto)

Espero que te sirva,

Saludos

Gustavo1973 · #3 (**permalink**) 02/04/2008, 13:17

En realidad lo que quiero es que al usar cualquier resolucion de pantalla, me quede siempre en el centro mi presentacion. con una tabla lo puedo hacer, pero quiero hacerlo solo con div.
Gracias, lo estoy probando.
Saludos

arriaka · #4 (**permalink**) 02/04/2008, 14:31

Hola Gustavo

Yo tengo una pagina que tengo alineada tanto horizontal como verticalmente. el codigo para ello es el siguiente:

Código:

#contenedor{
	width:760px; /*suponiendo que esa sea la anchura*/
	height:420px; /*suponiendo que esa sea la altura*/
	position:absolute;
	margin: 0px auto 0px auto;
	margin:-210px 0 0 -360px; /*los margenes son lla mitad de la altuta y la mitad de la anchura*/
	left:50%;
	top:50%;
}
#contenido {
	width: 760px; /*suponiendo que esa sea la anchura*/
	height: 420px; /*suponiendo que esa sea la altura*/
	position: absolute;
	overflow: auto;
}

Código:

<body>
	<div id="contenedor">
		<div id="contenido">
			CONTENIDO QUE QUIERES INSERTAR
		</div>
	</div>
</body>

Lo puedes comprobar en esta direccion: http://wm.areafor.com/aritz/proyectoFlash

Espero que esto te ayude. Saludos!

Mikmoro · #5 (**permalink**) 02/04/2008, 15:11

Este código sirve para IE6, IE7, Firefox, Opera, etc., y siempre queda en el centro verticalmente como tú quieres, a cualquier resolución.

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Centrado vertical</title>
<style type="text/css">
html, body { margin: 0pt; padding: 0pt;
height: 100%;
text-align: center;
}
#marco {
margin: auto;
display: table;
width: 750px;
height: 100%;
text-align: left;
}
#contenedor {
margin: auto;
display: table-cell;
vertical-align: middle;
position: relative;
height: 100%;
}
#vertical_ie { width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
#texto {
display:inline-block;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="marco">
<div id="contenedor"><span id="vertical_ie"></span>
<span id="texto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris pellentesque turpis vel risus. Nullam tincidunt lacus non urna.
Aliquam erat volutpat. Nam placerat, tortor et mollis facilisis, sapien
mauris dapibus mauris, sit amet pharetra tellus sem ut mi. Sed
tincidunt. Aenean tempus volutpat urna. Quisque at neque. Praesent
venenatis lacus ac massa. Sed accumsan luctus enim. Vestibulum massa
dui, scelerisque sed, dictum rhoncus, lacinia eget, tortor. Ut vel
turpis a elit pharetra pulvinar. Aliquam ut nisl ac nisi tristique
eleifend. Donec tristique ipsum id turpis.<br/><br/>
Vivamus vitae risus in est dictum faucibus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Ut ut pede et ante faucibus commodo. Cras pulvinar turpis
quis risus. Mauris scelerisque. Cras lectus. Aliquam erat volutpat.
Praesent erat nunc, dictum vel, vehicula quis, rutrum sit amet, arcu.
Donec interdum. Quisque tristique, purus non pulvinar cursus, magna
lectus blandit orci, vitae tristique tellus tellus eget est. Quisque
sollicitudin convallis sem. Nunc justo.
</span>
</div>
</div>
</body>
</html>

Espero que puedas adaptarlo a tu caso.

Mikel.

Gustavo1973 · #6 (**permalink**) 02/04/2008, 19:08

Mikmoro, tu metodo me centro bien, pero me genera un espacio entre los dos objetos flash que antes no tenia.
html

Cita:

css

Cita:

.body{background-image:url(fondo1.jpg);}
html, body { margin: 0pt; padding: 0pt;
height: 100%;
text-align: center;
}
#marco {
width: 750;
height: 100%;
text-align: left;
}
#contenedor {
margin: 0;
vertical-align: middle;
position: relative;
height: 100%;
}
#vertical_ie { width:0;
height:100%;
vertical-align:middle;
}
#texto {
display:inline-block;
vertical-align:middle;
}

Por que puede ser que lo haga???
Gracias

Mikmoro · #7 (**permalink**) 03/04/2008, 07:03

Hola, Gustavo.
Voy a mirar si veo algo raro, pero antes de nada un par de detalles:

es preferible que pongas la etiqueta body en minúsculas, como las demás, y no necesitas poner una clase para body. En lugar de llamarla en la css como .body (la clase que le has puesto), la llamas directamente body y listo

HTML:

<body>
<div id="marco">
...

CSS:

body { background-image:url(fondo1.jpg);
}
html, body { margin: 0pt; padding: 0pt;
height: 100%;
text-align: center;
}
...

Mikmoro · #8 (**permalink**) 03/04/2008, 07:20

Bueno, yo creo que ese espacio se provoca a haber un salto de línea natural por el tamaño de tus "objet". Se soluciona muy fácil: ponle un id al segundo div, y dale un espacio superior negativo (p.e. margin-top: -5px;).

Mikel.

Gustavo1973 · #9 (**permalink**) 03/04/2008, 12:26

Otra ver el molesto :D
logre que fiuncione bien, al menos en mi pc, cuando lo subo al server no veo el segundo objeto flash, ademas que en Fire Fox, se veia la separacion, asi que al correr el margen superior, en fire fox desaparecio la primera linea. les dejo el link
www.-.com.ar

Mikmoro · #10 (**permalink**) 03/04/2008, 12:32

Yo en Firefox lo veo bien, aunque le ha costado cargar el segundo flash unos 20 segundos, además de querer abrirme una ventana emergente

Mikel.

Gustavo1973 · #11 (**permalink**) 03/04/2008, 12:43

si, la ventana es una publicidad

,
En IE lo abre como se le ocurre, no solo no muestra el segundo objeto flash, algunas veces no carga la imagen del fondo. Creo que voy a volver a las tablas, es que queria meterla bajo normas W3C y con tablas patalea, es por eso que estaba probando con divisores, pero no puedo hacerlo

.
Saludos

Mikmoro · #12 (**permalink**) 03/04/2008, 15:33

Bueno, si dices que en tu PC se veía bien pero al llevarlo al servidor se ve mal, no creo que el problema sea de css. Habrá que buscar en alguna otra parte.

Mikel.