blog de gabriel: julio 2009

Hola, hace un tiempo luche bastante para centrar un div verticalmente y que se adecue al tamaño de la ventana del navegador, finalmente lo logre, les paso mi solución.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centrado Vertical</title>
<meta name="author" content="Gabriel">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<style type="text/css" media="screen"><!--
body{
margin: 0px;
overflow-y:hidden;overflow-x:hidden; esto es para que no se muestren las barras de desplazamiento si el bloque centrado es mayor que la ventana
}
#contenido{
background-color: #7c6e63;
vertical-align: middle;
margin-top: -248px; la mitad del alto del bloque pero con signo negativo
margin-left: -330px; la mitad del ancho del bloque pero con signo negativo
position: absolute;
top: 50%;
left: 50%;
height: 496px; el alto del bloque
width: 660px; el ancho del bloque
}
}
-->
</style>
</head>
<body>
<div id="contenido" >
Este es mi bloque centrado vertical
</div>
</body>
</html>

Si quieren ver un ejemplo de como funciona, lo use en la página principal del sitio de Nayik

Bueno, eso es todo, los veo en la próxima entrada.
Gabriel

blog de gabriel

Páginas

miércoles, 1 de julio de 2009

Centrado Vertical con CSS