02/04/2008, 15:11
|
| Colaborador | | Fecha de Ingreso: octubre-2006 Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes Puntos: 280 | |
Re: Centrado Vertical 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. |