¿Cómo centrar divs flotantes?

Quiero centrar los tres divs que aparecen en la maqueta debajo (todos tienen "float: left"). ¿Esto es posible?¿Cómo centrar divs flotantes?

No me importa tener wrapper-divs.

Alineación de texto: centro y pantalla: bloque en línea no funcionará con el código que tengo.

enter image description here

Fuente

2012-01-17 John Assymptoth

div#wrapper { 
    width:960px; 
    margin: 0 auto; 
}

http://jsfiddle.net/WyxHQ/1/

edición:

Movido código completo de violín a responder según la sugerencia

<div id="outer-wrapper"> 
    <div id="wrapper"> 
     <div class="one"></div> 
     <div class="two"></div> 
     <div class="three"></div> 
    </div> 
</div>

HTML

div#outer-wrapper{ 
border:2px solid black; 
    padding:10px; 
    width:100%; 
}

CSS

div#wrapper{ 
    width:99px; 
    margin:0 auto; 
} 

div { 
    width:33px; 
    height:20px; 
} 

div.one{ 
    background:red; 
    float:left; 
} 

div.two{ 
    background:blue; 
     float:left; 
} 

div.three{ 
    background:green; 
     float:left; 
}

Fuente

2012-01-17 20:24:04 calumbrodie

Eso centraría la envoltura en la pantalla, creo que quiere centrar los elementos flotantes * dentro * de la envoltura. – animuson

Luego simplemente cree _another_ wrapper, el principio es el mismo (vea violín) – calumbrodie

+1, pero debe mover el código relativo de JSFiddle a su respuesta. Esto funciona solo cuando conoces el ancho de los elementos, lo cual hace el asker. De lo contrario, me referiría a la respuesta de @ animuson. –

flotadores, como su nombre indica, son completamente independientes de sus contenedores. Por lo tanto, no puede centrarlos según un contenedor, ya que no conocerán ningún contenedor.

Fuente

2012-01-17 20:24:37

_¿Completamente_ independiente? No, no lo son. – nnnnnn

No * completamente *, per se, solo en el contexto de la pregunta, como en su posición relativa. –

Si desea centrarlos, no puede flotarlos. Una mejor alternativa sería hacerlos todos display: inline-block por lo que aún puede estilizarlos como un elemento de bloque, y todavía prestarán atención a su text-align: center en el contenedor primario. Esta parece ser una buena solución para el ejemplo limitado que ha proporcionado.

Para tener en cuenta la compatibilidad del navegador, deberá cambiarlos a <span> en lugar de <div> antes de agregar el display: inline-block a ellos. Esto sería compatible con todo IE7 y superior, y todos los demás navegadores modernos. IE6 no sería compatible, pero it's only widely used in China anymore.

Fuente

2012-01-17 20:27:03 animuson

No te olvides de asegurarte de que los elementos realmente son 'flotantes: ninguno'. Y text-align: center; debe agregarse al contenedor principal (en el ejemplo div # wrapper). – lechup

Espero que esto ayude:

<body> 
    <div style="width:306px; border:#333333 1px solid; margin-left:auto; margin-right:auto"> 
     <div style="width:100px; border:#333333 1px solid; float:left;">div A</div> 
     <div style="width:100px; border:#333333 1px solid; float:left;">div B</div> 
     <div style="width:100px; border:#333333 1px solid; float:left;">div C</div> 
    </div> 
</body>

Fuente

2012-01-17 20:53:58 srijan

Lo que quiero hacer es añadir un div contenedor para ellos.

A continuación, agregue el desbordamiento: automático para que el contenedor div se ajuste alrededor de los 3 div y luego configure el contenedor div en el centro con margen: 0 auto.

Fuente

2012-01-17 21:23:22 user1146440

También puede utilizar una lista y obtener los mismos resultados:

CSS:

.wrap 
    { 
    border:2px solid black; 
    width:100%; 
    } 

ul 
    { 
    width:99px; 
    margin:0 auto; 
    height: 20px;  
    } 

ul li 
    { 
    width:33px; 
    height:20px; 
    float: left; 
    margin: 0px; 
    padding: 0px; 
    } 

ul li.red 
    { 
    background-color: red; 
    } 

ul li.blue 
    { 
    background-color: blue; 
    } 

ul li.green 
    { 
    background-color: green; 
    }

HTML:

<div class="wrap"> 
     <ul> 
     <li class="red"> </li> 
     <li class="blue"></li> 
     <li class="green"></li> 
     </ul> 
    </div>

Fuente

2012-01-17 22:51:29 andicandy

Prueba esto: http://jsfiddle.net/nvpXx/3/

Usted puede envolver su flotó divs con un elemento de bloque en línea y lo centro dentro de su padre.

HTML

<div id="main"> 
    <div class="wrap"> 
     <div class="item">thing 1</div> 
     <div class="item">thing 2</div> 
     <div class="item">thing 3</div> 
     <div class="clear"></div> 
    </div> 
</div>

CSS

#main {width: 600px; background-color: #eee; margin: 0 auto; padding: 10px; text-align: center;} 
#main .item {float: left; border: 1px solid #ccc; margin: 5px; } 
.clear {clear: both;} 
.wrap { display: inline-block; padding: 5px; bordeR: 1px solid black; margin: auto;}

trampa potencial

esto no funciona bien si tiene tantos elementos flotó que envuelven a una segunda linea. En ese punto, el div.wrap se expande al 100% de su contenedor y, como resultado, todo está fuera del centro.

Fuente

2012-01-18 00:43:17 Larsenal

Trate de éste, que sea sencillo:

<ul> 
<li> one </li> 
<li> two </li> 
<li> three </li> 
</ul> 

<style> 
ul{margin:0 auto;max-width:500px} 
ul li{float:left;margin:0 auto 1em;text-align:center;width:33%} 
</style>

Esto hará que sea receptivo a pesar de que se rompe en algún momento, que ayuda a crear una consulta de medios para el ancho máximo:

<style> 
@media screen and (max-width:520px){ ul li{float:none} } 
</style>

Fiddle here

Fuente

2013-03-22 10:39:21 WIWIWWIISpitFire

Respuesta

Cuestiones relacionadas