Tema: Acomodar contenido en un div
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 30/12/2011, 10:32
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Acomodar contenido en un div
¿El esquema que busca es un centrado múltiple con independencia del contenido?:
Centrado en la horizontal de los tres elementos.
Centrado también en la vertical de los tres elementos respecto a la ventana.
Alineación media entre sí de los tres elementos en caso de que sean de distinta altura.

Y todo ello, sin conocer a priori ni contenido de las cajas, ni por lo tanto su altura. Y evitando solapamientos en caso de hacer más pequeña la ventana. También evitar que haya partes del contenido que queden inaccesibles al reducirla (por usar márgenes negativos para el centrado vertical). Evitando no se que cosas más...

Bueno, tampoco es tanto pedir.

Veamos a ver si lo siguiente le sirve de base:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Kseso? Jugando con css</title>
  6. <style type="text/css">
  7.  * {
  8.     margin: 0;
  9.     padding: 0;
  10.     border: 0;
  11.     position: relative;
  12. }
  13. html, body {
  14.   height: 100%;
  15.   background: #cdcdcd;
  16. }
  17.  
  18. .contenedor {
  19.   text-align: center;
  20.   background: #c0c0c0;
  21.   height: 100%;
  22. }
  23.  
  24. .contenedor:before {
  25.   content: '';
  26.   display: inline-block;
  27.   height: 100%;
  28.   vertical-align: middle;
  29.   margin-right: -0.25em; 
  30.  }
  31.  
  32. .centrado {
  33.   display: inline-block;
  34.   vertical-align: middle;
  35.   width: 25%;
  36.   min-width: 200px;
  37.   padding: 10px 1%;
  38.   margin: 15px 1%;
  39.   border: #a0a0a0 solid 1px;
  40.   background: #f5f5f5;
  41.   text-align: left;
  42.   box-shadow: 0 0 10px 10px rgba(0,0,0,.2)
  43. }    
  44. </style>
  45. </head>
  46. <body>
  47. <div class="contenedor">
  48.     
  49.     <div class="centrado">
  50.         <h1>Título</h1>
  51.         <p>Lorem ipsum dolor sit amet consectetuer lorem Vestibulum nunc pellentesque Aliquam. Accumsan rhoncus nibh libero eu ornare eleifend sit nunc Curabitur massa. Justo orci id convallis Vestibulum augue lacus Pellentesque at ac est. Eros Suspendisse semper augue sit et pharetra mus In tortor Sed. Consectetuer volutpat eget sem nisl Curabitur rutrum hac nulla sit fringilla. Duis wisi justo velit magna Mauris Lorem nulla Phasellus sit lobortis. Quis elit ipsum Lorem dis Fusce justo ipsum semper dictumst Proin. Et augue sed id est et ac ut.</p>
  52.       <p>Vel sit tellus ac nunc ipsum elit semper mauris tellus senectus. Augue elit urna nibh Curabitur velit tempus Vestibulum ligula wisi.</p>
  53.     </div>
  54.     
  55.     <div class="centrado">
  56.         <h2>Segundo título</h2>
  57.         <p>Vel sit tellus ac nunc ipsum elit semper mauris tellus senectus. Augue elit urna nibh Curabitur velit tempus Vestibulum ligula wisi.</p>
  58.     </div>
  59.     
  60.     <div class="centrado">
  61.         <h3>Otro Encabezamiento</h3>
  62.         <p>Lorem ipsum dolor sit amet consectetuer lorem Vestibulum nunc pellentesque Aliquam. Accumsan rhoncus nibh libero eu ornare eleifend sit nunc Curabitur massa. Justo orci id convallis Vestibulum augue lacus Pellentesque at ac est. Eros Suspendisse semper augue sit et pharetra mus In tortor Sed. Consectetuer volutpat eget sem nisl Curabitur rutrum hac nulla sit fringilla. Duis wisi justo velit magna Mauris Lorem nulla Phasellus sit lobortis. Quis elit ipsum Lorem dis Fusce justo ipsum semper dictumst Proin. Et augue sed id est et ac ut.</p>
  63.     </div>
  64.     
  65. </div>
  66. </body>
  67. </html>
Pista para adaptarlo a su cabecera:
Dele una altura a contenedor ( y lógicamente, haga que su contenido no supere dicha altura)

Créditos: En base a una realización de Chris Coyier.