Tema: PROBLEMA con Centrado horizontal y Float left
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/03/2010, 12:34
Computer XTress
 
Fecha de Ingreso: diciembre-2004
Mensajes: 721
Antigüedad: 20 años
Puntos: 2
Pregunta PROBLEMA con Centrado horizontal y Float left
Hola a todos!

Tengo este problema que me esta costando mucho resolver. Tengo una div que contiene un numero (dinamico) de elementos de mismo tamaño. Estos elementos van juntos con float: left en la misma linea horizontal (osea, sin saltos de linea, un solo row).

El problema es que necesito que estos elementos vayan alineados horizontalmente al centro. Si hay solo uno, apareceria en el MEDIO de la pantalla. Pero ya que necesito usar FLOAT: LEFT; para que los elementos salgan uno al lado del otro, no tengo forma de alinearlos...

Aca va un codigo ejemplo:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  4. <head>
  5.  
  6.     <title>test</title>
  7.  
  8.     <style type="text/css">
  9.  
  10.         .wrap { width: 900px; background-color: gray; margin:auto; padding:30px;}
  11.         .holder { width:840px; }
  12.         .box { width:150px; height:150px; float:left; background-color:maroon; border: 1px black solid; }
  13.     </style>
  14.  
  15. </head>
  16. <body>
  17.  
  18.     <div class="wrap">
  19.  
  20.         <div class="holder">
  21.  
  22.                 <div class="box">a</div>
  23.                 <div class="box">b</div>
  24.                 <div class="box">c</div>
  25.  
  26.                 <div style="clear:both;"></div>
  27.         </div>
  28.  
  29.     </div>
  30.  
  31.  
  32. </body>
  33. <html>

En otra ocacion donde el numero de elementos era fijo pude solucionarlo dandole un ancho FIJO a la div "holder", y luego darle margin:auto;. Pero claro, aca no puedo hacerlo por que la cantidad de elementos es dinamica.

A alguien se le ocurre como lo puedo hacer?


Muchas gracias!

Ed