web-dev-qa-db-fra.com

Centrer les divisions flottantes dans une autre division

J'ai cherché 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 pouvoir régler le problème que j'ai.

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

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

Je vous remercie. J'apprécie toutes les suggestions.

<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>
htmlcentercss
139
Darren

Tout d’abord, supprimez l’attribut float du divs intérieur. Ensuite, mettez text-align: center sur le div extérieur principal. Et pour le divs intérieur, utilisez display: inline-block . Peut-être serait-il également sage 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>
_
261
Sampson

Avec Flexbox , vous pouvez facilement centrer horizontalement (et verticalement) le centre des enfants à 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 )

Ajoutez maintenant les règles suivantes au wrapper:

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

et les enfants flottés sont alignés au centre (DÉMO)

Juste pour le plaisir, pour obtenir un alignement vertical, ajoutez simplement:

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

DÉMO

33
Danield

J'ai accompli ce qui précède en utilisant un positionnement relatif et en flottant à 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 plus tôt (surprise, surprise!)

Je ne me souviens pas de la source de cette méthode, malheureusement, donc je ne peux pas donner crédit à l'auteur original. Si quelqu'un d'autre le sait, merci de poster le lien!

10
Kendolein

La solution suivante n'utilise pas de blocs en ligne. Cependant, il nécessite deux divs helper:

  1. Le contenu est flotté
  2. L'assistant interne est flottant (il s'étend autant que le contenu)
  3. L’aide interne est poussée à droite de 50% (sa gauche s’aligne sur le centre de l’aide extérieure)
  4. Le contenu est tiré à gauche à 50% (son centre s'aligne sur la gauche de l'aide interne)
  5. L'assistant externe est configuré pour masquer le débordement
.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
Salman A

display: inline-block; ne fonctionnera 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;
}
4
Abdulla Kaleem

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>
2
Touhid Rahman

Dans mon cas, je ne pouvais pas obtenir la réponse de @Sampson pour travailler pour moi, au mieux j'ai une seule colonne centrée sur la page. Cependant, au cours du processus, j'ai appris le fonctionnement réel du flotteur et créé cette solution. À la base, le correctif est très simple mais difficile à trouver, comme le prouve ce fil de discussion qui a eu plus de 146 000 vues au moment de cet article sans aucune mention.

Tout ce qui est nécessaire est de totaliser la quantité de largeur d'espace d'écran occupée par la disposition souhaitée, puis de donner au parent la même largeur et d'appliquer margin: auto. C'est ça!

Les éléments de la mise en page dicteront la largeur et la hauteur du div "outer". Prenez la largeur ou la hauteur de chaque "myFloat" ou de l'élément, ainsi que ses bordures + ses marges et ses rembourrages, puis ajoutez-les tous ensemble. Ajoutez ensuite les autres éléments de la même manière. Cela vous donnera la largeur du parent. Elles peuvent toutes être de tailles différentes et vous pouvez le faire avec moins d’éléments ou plus.

Ex. (Chaque élément a 2 côtés, donc les bordures, marges et marges sont multipliées x2)

Donc, un élément qui a une largeur de 10px, une bordure de 2px, une marge de 6px, un remplissage de 3px ressemblerait à ceci: 10 + 4 + 12 + 6 = 32

Ajoutez ensuite toutes les largeurs totalisées de votre élément.

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

Dans cet exemple, la largeur du div "externe" serait de 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
dimmech