Alignement d'un div float:left au centre ?

Question

Je souhaite qu'un groupe d'images s'affiche horizontalement sur la page. Chaque image a quelques liens en dessous d'elle et je dois donc mettre un conteneur autour de chaque image/groupe de liens.

Ce qui se rapproche le plus de ce que je veux, c'est de les mettre dans des divs qui flottent à gauche. Le problème est que je veux que les conteneurs soient alignés au centre et non à gauche. Comment puis-je y parvenir ?

Answer 1

Utiliser display:inline-block; au lieu de float

vous ne pouvez pas centrer les flotteurs, mais les blocs en ligne se centrent comme s'il s'agissait de texte, donc sur le conteneur global extérieur de votre "rangée" - vous définissez text-align: center; puis pour chaque conteneur d'image/de légende (ce sont ceux qui seraient inline-block; ) vous pouvez réaligner le texte à gauche si vous le souhaitez.

Answer 2

CSS Flexbox est bien supporté ces jours-ci. Aller ici pour un bon tutoriel sur la flexbox.

Cela fonctionne bien dans tous les navigateurs récents :

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>

Certains peuvent se demander pourquoi ne pas utiliser display : inline-block ? Pour les choses simples, c'est bien, mais si vous avez du code complexe dans les blocs, la mise en page peut ne plus être centrée correctement. Flexbox est plus stable que float left.

Answer 3

Essayez comme ceci :

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>

Answer 4

Il suffit d'envelopper les éléments flottants dans un <div> et lui donner ce CSS :

.wrapper {

display: table;
margin: auto;

}

Answer 5

C'est peut-être ce que vous cherchez - https://www.w3schools.com/css/css3_flexbox.asp

CSS :

#container {
  display:                 flex;
  flex-wrap:               wrap;
  justify-content:         center;
}

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

HTML :

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>