Foros del Web » Creando para Internet » CSS »

PROBLEMA con Centrado horizontal y Float left

Estas en el tema de PROBLEMA con Centrado horizontal y Float left en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 15/03/2010, 13:34
 
Fecha de Ingreso: diciembre-2004
Mensajes: 721
Antigüedad: 13 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.  
  5.     <title>test</title>
  6.  
  7.     <style type="text/css">
  8.  
  9.         .wrap { width: 900px; background-color: gray; margin:auto; padding:30px;}
  10.         .holder { width:840px; }
  11.         .box { width:150px; height:150px; float:left; background-color:maroon; border: 1px black solid; }
  12.     </style>
  13.  
  14. </head>
  15.  
  16.     <div class="wrap">
  17.  
  18.         <div class="holder">
  19.  
  20.                 <div class="box">a</div>
  21.                 <div class="box">b</div>
  22.                 <div class="box">c</div>
  23.  
  24.                 <div style="clear:both;"></div>
  25.         </div>
  26.  
  27.     </div>
  28.  
  29.  
  30. </body>

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
  #2 (permalink)  
Antiguo 15/03/2010, 17:39
 
Fecha de Ingreso: diciembre-2008
Mensajes: 56
Antigüedad: 9 años
Puntos: 1
Respuesta: PROBLEMA con Centrado horizontal y Float left

Hola, lo primero que me viene a la cabeza, es display table

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>título</title>
<style type="text/css">
<!--
* { margin: 0; padding: 0; list-style-type:none;}
#menu {
margin:0 auto;
display: table;
width:90%;
}
#menu ul{display:table-row;}
#menu li {display:table-cell; padding:4px 0; border:1px solid #ccc; text-align:center;}
-->
</style>
</head>

<body>

<div id="menu">
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
<li>Elemento 6</li>
<li>Elemento 7</li>
</ul>
</div>
</body>
</html>
El problema es que no todos los navegadores entienden display table, la solución rápida... utilizar una tabla.

Espero que te sea de útil.
Un saludo.
  #3 (permalink)  
Antiguo 15/03/2010, 19:25
 
Fecha de Ingreso: febrero-2010
Ubicación: /home/México
Mensajes: 57
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: PROBLEMA con Centrado horizontal y Float left

no entiendo muy bien, es decir!, que tipos de numero son para que necesiten tanto width los box? no se soluciona reduciendolo?

y eso de dinamico a que te refieres?...es decir los vas creando con un while desde una fuente? o como?

perdon por no entender bien, te pregunto para poder ayudar

saludos
  #4 (permalink)  
Antiguo 15/03/2010, 22:45
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: PROBLEMA con Centrado horizontal y Float left

Con el siguiente codigo centramos horizontalmente el div .holder

Código:
*{margin:0; padding:0;}   /*recuerda siempre crear un reset*/  
.wrap { width: 900px; background-color: gray; padding:30px; text-align:center;}
.holder { /*width:840px;*/ overflow:hidden; margin:0 auto; text-align:left;}
.box { width:150px; height:150px; float:left; background-color:maroon; border: 1px black solid; }
Como ves utilizamos overflow:hidden; en .holder para limpliar los float de modo que ya no necesitaras ensuciar tu html con <div style="clear:both;"></div>, asi que ya puedes borrar esto. Utilizamos la propiedad text-align como un truco para que nos entienda ie. Con margin:0 auto; decimos que de un margen de 0 para top y bottom y centre hacia los lados.


Espero te sirva, saludos!

Etiquetas: float, horizontal, left, centrar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:12.