Tema: Centrar varios objetos alineados PERFECTAMENTE
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 24/06/2011, 05:30
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 6 meses
Puntos: 539
Respuesta: Centrar varios objetos alineados PERFECTAMENTE
Es básicamente la idea que apuntó Tredio. Con alguna cosilla diferente.

Esto podría ser (tres realizaciones distintas en base a la misma idea):

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.     outline: 0;
  12.   }
  13. html, body {
  14.   font-weight:normal;
  15.   font-size: 100%;
  16.   height:100%;
  17.   width: 100%;
  18.   background: #F5DCB3;
  19.   }
  20. .contenedor{
  21.   width: 80%;
  22.   margin: 0 auto 20px;
  23.   background: #435266;
  24.   padding-bottom: 10px;
  25. }
  26.  
  27. h1, h2 {
  28.     line-height: 1em;
  29.     font-family: Arial, sans-serif;
  30.     text-align: center;
  31.     padding: 10px;
  32.     color: #f5f5f5;
  33. }
  34. .contenedor p {color: #f5f5f5;}
  35. .padre {
  36.     background: #aaa;
  37.     text-align: center;
  38.     white-space: nowrap;
  39.     font-size: 20px;
  40.     letter-spacing: 20px;
  41.     line-height: 12px;
  42.     overflow: hidden;
  43.     padding: 10px 0;
  44. }
  45.  
  46. .hijo {
  47.     background: #F5DCB3;
  48.     display: inline-block;
  49.     letter-spacing: normal;
  50.     font-size: normal;
  51.     white-space: normal;
  52.     text-align: normal;
  53.     vertical-align: middle;
  54.     border: 1px solid #fff;
  55. }
  56. .hijo p {
  57.   color: #444;
  58.     font-family: Arial, sans-serif;
  59.     font-size: 12px;
  60.     line-height: 1.5em;
  61.     text-align: left;
  62.     padding: 5px;
  63. }
  64. .hijo img {width:100px;}
  65. #segundo {
  66.   letter-spacing:20px;
  67.   margin:0 auto;
  68.   padding:0;
  69.   white-space:normal;
  70.   width:40%;
  71. }
  72.  
  73. #tercero {
  74.   margin:0 auto;
  75.   overflow:auto;
  76.   width:90%;
  77.   letter-spacing: 10px;
  78. }
  79. #segundo .hijo {margin: 10px 0;width: 100px; height: 100px;}
  80. #tercero .hijo {margin: 10px 0;width: 100px;vertical-align: bottom;}
  81.       /****************
  82.       un par de declaraciones para el inombrable,
  83.       que en un proyecto real irían en su CC 
  84.       ***************/
  85. .hijo, #segundo .hijo {
  86.     *display: inline;
  87.     *margin: 10px;
  88. }
  89. #tercero {*height: 120px;}
  90. </style>
  91. </head>
  92.  
  93. <body>
  94. <div class="contenedor">
  95.  
  96. <h1>"Centrar al Centro" Divs Conjuntamente</h1>
  97. <p>O cómo distribuir elementos equitativamente, con independencia de su número o tamaño. En vez de utilizar div´s aplica a una lista y tienes el típico menú dinámico (opciones variables) centrado</p>
  98.  
  99. <div class="padre">
  100.     <div class="hijo">
  101.     <p>Una caja con algo de texto.</p>
  102.     </div>
  103.  
  104.     <div class="hijo">
  105.     <img src="estilos/pict132.jpg" alt="img" />
  106.     <p>Imagen y texto</p>
  107.     </div>
  108.  
  109.     <div class="hijo">
  110.     <img src="estilos/pavo.jpg" alt="img" />
  111.     </div>
  112.  
  113.     <div class="hijo">
  114.     <img src="estilos/pict083.jpg" alt="img" />
  115.     <p>Otro div</p>
  116.     </div>
  117.     
  118.     <div class="hijo">
  119.     <p>+ ó - cajas. El centrado se mantiene.</p>    
  120.     </div>
  121. </div>
  122.  
  123. <p>Podemos incluir alguna variación en las propiedades de .padre, añadiendo un id (#segundo) para hacer la típica galería con distribución homogénea</p>
  124.  
  125. <div id="segundo" class="padre">
  126.     <div class="hijo">
  127.     <p>Una caja con texto.</p>
  128.     </div>
  129.  
  130.     <div class="hijo">
  131.     <img src="estilos/pict132.jpg" alt="img" />
  132.     </div>
  133.  
  134.     <div class="hijo">
  135.     <img src="estilos/pavo.jpg" alt="img" />
  136.     <p>Más divs</p>
  137.     </div>
  138.  
  139.     <div class="hijo">
  140.     <img src="estilos/pict083.jpg" alt="img" />
  141.     <p>Otro div</p>
  142.     </div>
  143.     
  144.     <div class="hijo">
  145.     <p>Añade o quita cajas. El centrado se mantiene.</p>    
  146.     </div>
  147.     <div class="hijo">
  148.     <img src="estilos/pict141.jpg" alt="img" />
  149.     <p>Otro div</p> 
  150.     </div>  
  151. </div>
  152.  
  153. <p>Incluso, en base al primero, una galería con su escroll:</p>
  154.  
  155. <div id="tercero" class="padre">
  156.     <div class="hijo">
  157.     <img src="estilos/sumario.jpg" alt="img" />
  158.     </div>
  159.  
  160.     <div class="hijo">
  161.     <img src="estilos/pict132.jpg" alt="img" />
  162.     <p>Imagen y texto</p>
  163.     </div>
  164.  
  165.     <div class="hijo">
  166.     <img src="estilos/pavo.jpg" alt="img" />
  167.     <p>Más divs</p>
  168.     </div>
  169.  
  170.     <div class="hijo">
  171.     <img src="estilos/pict083.jpg" alt="img" />
  172.     <p>Otro div</p>
  173.     </div>
  174.     
  175.     <div class="hijo">
  176.     <img src="estilos/pict083.jpg" alt="img" />
  177.     <p>Otro div</p>
  178.     </div>
  179.     
  180.     <div class="hijo">
  181.     <p>Una caja con algo de texto.</p>
  182.     </div>
  183.  
  184.     <div class="hijo">
  185.     <img src="estilos/pict083.jpg" alt="img" />
  186.     <p>Otro div</p>
  187.     </div>
  188.  
  189.     <div class="hijo">
  190.     <img src="estilos/pict083.jpg" alt="img" />
  191.     <p>Otro div</p>
  192.     </div>
  193.  
  194.     <div class="hijo">
  195.     <img src="estilos/pict083.jpg" alt="img" />
  196.     <p>Otro div</p>
  197.     </div>
  198.     
  199.     <div class="hijo">
  200.     <img src="estilos/pict083.jpg" alt="img" />
  201.     <p>Otro div</p> 
  202.     </div>
  203. </div>
  204. </div>
  205. </body>
  206. </html>

Creo que no hay mucho que explicar. Sólo que al usar letter-spacing (en .padre) para separar los .hijo evitamos tener que andar definiendo diferentes márgenes para el primero/último.