Centrer les divs flottantes dans une autre div

Question

J'ai cherché dans d'autres questions et, bien que ce problème semble similaire à quelques autres, rien de ce que j'ai vu jusqu'à présent ne semble répondre au problème que je rencontre.

J'ai un div qui contient un certain nombre d'autres div, chacun d'entre eux étant flottant à gauche. Ces divs contiennent chacune une photo et une légende. Tout ce que je veux, c'est que le groupe de photos soit centré dans la division qui le contient.

Comme vous pouvez le voir dans le code ci-dessous, j'ai essayé d'utiliser les deux méthodes suivantes overflow:hidden y margin:x auto sur les divs parents, et j'ai également ajouté une balise clear:both (comme suggéré dans un autre sujet) après les photos. Rien ne semble faire de différence.

Merci. J'apprécie toute suggestion.

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

Answer 1

Tout d'abord, retirez le float de l'attribut interne div s. Ensuite, on met text-align: center sur l'extérieur principal div . Et pour l'intérieur div s, utiliser display: inline-block . Il serait également judicieux de leur donner des largeurs explicites.

---

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

Answer 2

Avec Flexbox vous pouvez facilement centrer horizontalement (et verticalement) enfants flottants à l'intérieur d'un div.

Donc si vous avez un balisage simple comme ceci :

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

avec 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;
}

(C'est le (attendu - et indésirable) RÉSULTAT )

Maintenant, ajoutez les règles suivantes au wrapper :

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

et les enfants flottants sont alignés au centre ( DEMO )

Juste pour le plaisir, pour obtenir l'alignement vertical aussi bien ajouter :

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

DEMO

Answer 3

J'ai réalisé ce qui précède en utilisant le positionnement relatif et le flottement vers la droite.

Code 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/

Cela fonctionnera dans IE8 et plus, mais pas avant (surprise, surprise !).

Je ne me souviens malheureusement pas de la source de cette méthode, et je ne peux donc pas en créditer l'auteur original. Si quelqu'un d'autre la connaît, merci de poster le lien !

Answer 4

display: inline-block; ne fonctionne dans aucun des navigateurs IE. Voici ce que j'ai utilisé.

// 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;
}

Answer 5

Solution :

<!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>