web-dev-qa-db-fra.com

Comment centrer des divisions flottantes dans un conteneur

Est-il possible de centrer les div flottantes dans un conteneur et si oui comment?

Par exemple, j'ai une page avec un conteneur div contenant beaucoup de divs de taille variable (générés dynamiquement) flottants (à gauche). Les div débordent régulièrement sur la ligne suivante, mais elles ne sont jamais centrées dans le conteneur div, mais alignées avec la gauche. Cela ressemble à ceci:

----------------------------
-                          -
- +++  +++++  ++++  ++     -
- +++  +++++  ++++  ++     -
-                          -
- ++   ++++++  +++  +      -
- ++   ++++++  +++  +      -
-                          -
----------------------------

Considérant que je voudrais que les divs flottés soient centrés dans le conteneur comme ceci:

----------------------------
-                          -
-   +++  +++++  ++++  ++   -
-   +++  +++++  ++++  ++   -
-                          -
-   ++   ++++++  +++  +    -
-   ++   ++++++  +++  +    -
-                          -
----------------------------

Merci,

DLiKS

htmlcss
32
DLiKS

C'est possible. Utiliser http://www.pmob.co.uk/pob/centred-float.htm et http://css-discuss.incutio.com/wiki/Centering_Block_Element comme source.

Voici un violon démontrant le concept, utilisant le HTML et le CSS ci-dessous: https://jsfiddle.net/t9qw8m5x/

<div id="outer">
    <ul id="inner">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2 with long text</a></li>
        <li><a href="#">Button 3</a></li>
    </ul>
</div>

C'est le CSS minimum requis pour l'effet:

#outer {
    float: right;
    position: relative;
    left: -50%;
}

#inner {
    position: relative;
    left: 50%; 
}

#inner > li {
    float: left;
}

Explication:

Commencez avec seulement la règle li { float: left; }. Encadrez ensuite ces flottants dans le left: 50%; relative position, de sorte que le bord gauche du <ul> se trouve au centre horizontal de la page, puis utilisez les règles de #outer pour l’ajuster correctement afin que le centre de #inner soit aligné sur la page.

24
Sarfraz

Avec CSS3, vous pouvez également réaliser cela avec flexbox:

HTML:

<ul id="flexcontainer">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2 with long text</a></li>
     <li><a href="#">Item 3</a></li>
</ul>

Min CSS:

#flex-container {
    display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

#flex-container > li {
    float: left;
}

Fiddle (avec un peu de style pour la visualisation): https://jsfiddle.net/k5o37dff/4/

Plus d'informations sur flexbox: https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Prise en charge du navigateur: https://www.w3schools.com/cssref/css3_pr_flex.asp

0
Carl Papworth

Calculez la quantité totale de largeur d'écran occupée par la disposition souhaitée, puis attribuez au parent la même largeur et appliquez margin: auto.

.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 = 60px */
    margin: 10px;
    /* 6 borders x 10px = 60px */
    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>

0
dimmech