miércoles, 1 de julio de 2009

Centrado Vertical con CSS

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.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Centrado Vertical</title>
  5. <meta name="author" content="Gabriel">
  6. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  7. <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
  8. <meta http-equiv="content-style-type" content="text/css">
  9. <meta http-equiv="expires" content="0">
  10. <style type="text/css" media="screen"><!--
  11. body{
  12. margin: 0px;
  13. 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
  14. }
  15. #contenido{
  16. background-color: #7c6e63;
  17. vertical-align: middle;
  18. margin-top: -248px; la mitad del alto del bloque pero con signo negativo
  19. margin-left: -330px; la mitad del ancho del bloque pero con signo negativo
  20. position: absolute;
  21. top: 50%;
  22. left: 50%;
  23. height: 496px; el alto del bloque
  24. width: 660px; el ancho del bloque
  25. }
  26. }
  27. -->
  28. </style>
  29. </head>
  30. <body>
  31. <div id="contenido" >
  32. Este es mi bloque centrado vertical
  33. </div>
  34. </body>
  35. </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

No hay comentarios.:

Publicar un comentario

Gracias por tu comentario