Centrar divs flotantes dentro de otro div

Solución:

Primero, quite el float atributo en el interior divs. Entonces, pon text-align: center en el exterior principal div. Y para el interior divs, uso display: inline-block. También sería prudente darles anchos explícitos también.

---

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="https://foroayuda.es/headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>

Con Flexbox puede centrar fácilmente horizontalmente (y verticalmente) niños flotando dentro de un div.

Entonces, si tiene un marcado simple como ese:

<div class="wpr">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

con CSS:

.wpr
{
    width: 400px;
    height: 100px;
    background: pink;
    padding: 10px 30px;
}

.wpr span
{
    width: 50px;
    height: 50px;
    background: green;
    float: left; /* **children floated left** */
    margin: 0 5px;
}

(Este es el RESULTADO (esperado e indeseable))

Ahora agregue las siguientes reglas al contenedor:

display: flex;
justify-content: center; /* align horizontal */

y los niños flotantes se alinean en el centro (MANIFESTACIÓN)

Solo por diversión, para obtener una alineación vertical, simplemente agregue:

align-items: center; /* align vertical */

MANIFESTACIÓN

Logré lo anterior usando posicionamiento relativo y flotando hacia la derecha.

Código HTML:

<div class="clearfix">                          
    <div class="outer-div">
        <div class="inner-div">
            <div class="floating-div">Float 1</div>
            <div class="floating-div">Float 2</div>
            <div class="floating-div">Float 3</div>
        </div>
    </div>
</div>

CSS:

.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JSFiddle: http://jsfiddle.net/MJ9yp/

Esto funcionará en IE8 y versiones posteriores, pero no antes (¡sorpresa, sorpresa!)

Desafortunadamente, no recuerdo la fuente de este método, por lo que no puedo dar crédito al autor original. Si alguien más lo sabe, ¡publique el enlace!

---

---

Utiliza Nuestro Buscador