Centrando divs flotantes dentro de otro div

He buscado otras preguntas y, si bien este problema parece similar a un par de otros, nada que he visto hasta ahora parece abordar el problema que estoy teniendo.

Tengo un div que contiene un número de otros divs, cada uno de los cuales está flotando a la izquierda. Cada uno de estos divs contiene una foto y un título. Todo lo que quiero es que el grupo de fotos se centre dentro del div que contiene.

Como puedes ver en el código a continuación, he intentado usar overflow:hidden y margin:x auto en los divs padres, y También he añadido un clear:both (como se sugiere en otro tema) después de las fotos. Nada parece hacer una diferencia.

Gracias. Agradezco cualquier sugerencia.

<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
    <h4>Section Header</h4>

    <div style="margin: 2em auto;">

        <div style="float: left; margin: auto 1.5em;">
            <img src="photo1.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo2.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo3.jpg" /><br />
             Photo Caption
        </div>

        <div style="clear: both; height: 0; overflow: hidden;"> </div>

    </div>

</div>
Author: James A Mohler, 2009-08-13
Source

7 answers

Primero, eliminar el atributo float en el interior div s. A continuación, poner text-align: center en el exterior principal div. Y para el interior div s, uso display: inline-block. También podría ser prudente darles anchuras explícitas también.

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>
 250
Author: Sampson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-14 18:07:12

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

Así que si tienes un marcado simple como este: 

<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 wrapper: 

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

Y los niños flotantes se alinean en el centro (DEMO)

Solo por diversión, para obtener alineación vertical también añadir: 

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

DEMO

 33
Author: Danield,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-06 07:46:24

Logré lo anterior usando posicionamiento relativo y flotando a 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 arriba, 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, por favor publique el enlace!

 9
Author: Kendolein,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-13 10:37:29

La siguiente solución no utiliza bloques en línea. Sin embargo, requiere dos divs ayudantes:

  1. El contenido es flotante
  2. El ayudante interior está flotando (se extiende tanto como el contenido)
  3. El ayudante interior se empuja a la derecha 50% (su izquierda se alinea con el centro del ayudante exterior)
  4. El contenido se tira a la izquierda 50% (su centro se alinea con la izquierda del ayudante interno)
  5. El ayudante externo está configurado para ocultar el desbordamiento

.ca-outer {
  overflow: hidden;
  background: #FFC;
}
.ca-inner {
  float: left;
  position: relative;
  left: 50%;
  background: #FDD;
}
.content {
  float: left;
  position: relative;
  left: -50%;
  background: #080;
}
/* examples */
div.content > div {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #FFF;
}
ul.content {
  padding: 0;
  list-style-type: none;
}
ul.content > li {
  margin: 10px;
  background: #FFF;
}
<div class="ca-outer">
  <div class="ca-inner">
    <div class="content">
      <div>Box 1</div>
      <div>Box 2</div>
      <div>Box 3</div>
    </div>
  </div>
</div>
<hr>
<div class="ca-outer">
  <div class="ca-inner">
    <ul class="content">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
      <li>Suspendisse iaculis risus ut dapibus cursus.</li>
    </ul>
  </div>
</div>
 5
Author: Salman A,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-22 12:49:50

display: inline-block; no funcionará en ninguno de los navegadores IE. Esto es lo que usé.

// change the width of #boxContainer to 
// 1-2 pixels higher than total width of the boxes inside:

#boxContainer {         
    width: 800px; 
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#Box{
    width: 240px; 
    height: 90px;
    background-color: #FFF;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}
 4
Author: Abdulla Kaleem,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-16 05:33:20

Solución:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Knowledge is Power</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #outer {
                text-align:center;
                width:100%;
                height:200px;
                background:red;
            }
            #inner {
                display:inline-block;
                height:200px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
        </div>
    </body>
</html>
 2
Author: Touhid Rahman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-23 06:19:22

En mi caso, no pude obtener la respuesta de @Sampson para trabajar para mí, en el mejor de los casos obtuve una sola columna centrada en la página. En el proceso, sin embargo, aprendí cómo funciona realmente el flotador y creé esta solución. En su núcleo la solución es muy simple pero difícil de encontrar como evidente por este hilo que ha tenido más de 146k vistas en el momento de este post sin mencionar.

Todo lo que se necesita es sumar la cantidad de ancho de espacio de pantalla que ocupará el diseño deseado y luego hacer el parent el mismo ancho y aplicar margen: auto. ¡Eso es!

Los elementos en el diseño dictarán el ancho y la altura del div "exterior". Tome cada" myFloat " o el ancho o alto del elemento + sus bordes + sus márgenes y sus rellenos y añádalos todos juntos. A continuación, añadir los otros elementos juntos de la misma manera. Esto le dará el ancho padre. Todos pueden ser de tamaños algo diferentes y puedes hacerlo con menos o más elementos.

Ex.(cada elemento tiene 2 lados tan borde, margen y relleno se multiplican x2)

Así que un elemento que tiene un ancho de 10px, borde 2px, margen 6px, relleno 3px se vería así: 10 + 4 + 12 + 6 = 32

Luego agrega todos los anchos totales de tu elemento.

Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24

En este ejemplo el ancho para el div "exterior" sería 112.

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60 */
    margin: 10px;
    /* 6 borders x 10px = 60 */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}
<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>
 1
Author: dimmech,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-23 04:32:44