Ver Mensaje Individual
  #10 (permalink)  
Antiguo 26/07/2011, 02:02
Avatar de andresdzphp
andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 12 años, 9 meses
Puntos: 793
Respuesta: Centrar div vertical y horizontalmente dentro de otro

A mi me gusta aprender con ejemplos y aquí te dejo uno de como centrar verticalmente un div.

Código CSS:
Ver original
  1. <html>
  2. <head>
  3. <title>Centrado Vertical con CSS</title>
  4.  
  5. <style type="text/css">
  6.  
  7. .contenedor {
  8.     top: 0;
  9.     left: 0;
  10.     width: 100%;
  11.     height: 100%;}
  12.    
  13. .contenedor[class] {
  14.     position: fixed;
  15.     display: table;}
  16.    
  17. .centrado {
  18.     position: absolute;
  19.     top: 50%;}
  20.  
  21. .centrado[class] {
  22.     display: table-cell;
  23.     vertical-align: middle;
  24.     text-align: center;
  25.     position: static;
  26.     }
  27.    
  28. .contenido {
  29.     width: 200px;
  30.     height: 200px;
  31.     border: 1px solid #000;
  32.     margin: 0 auto;
  33.     position: relative;
  34.     top: -50%;
  35.     }
  36.    
  37. </style>
  38.  
  39. </head>
  40. <body>
  41. <div class="contenedor">
  42.     <div class="centrado">
  43.         <div class="contenido">
  44.         <p>Centrado vertical y horizontal</p>
  45.  
  46.         </div>
  47.     </div>
  48. </div>
  49. </body>
  50.  
  51. </html>
__________________
Si sabemos como leer e interpretar el manual será mucho más fácil aprender PHP. En lugar de confiar en ejemplos o copiar y pegar - PHP