Aligner un flottant: div gauche au centre?

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

Le plus proche que j'ai obtenu de ce que je veux est de les mettre dans des divs qui flottent: gauche. Le problème est que je veux que les conteneurs s'alignent au centre et non à gauche. Comment puis-je atteindre cet objectif.

utiliser display:inline-block;au lieu de float

vous ne pouvez pas centrer les flottants, mais les blocs en ligne se centrent comme s'ils étaient du texte, donc sur le conteneur global extérieur de votre "ligne" - vous définiriez text-align: center;alors pour chaque conteneur d'image / légende (ce sont ceux qui seraient inline-block;), vous pouvez re -alignez le texte à gauche si vous avez besoin

CSS Flexbox est bien pris en charge ces jours-ci. Allez ici pour un bon tutoriel sur flexbox.

Cela fonctionne bien dans tous les nouveaux navigateurs:

#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 des choses simples, c'est bien, mais si vous avez du code complexe dans les blocs, la mise en page peut ne plus être correctement centrée. Flexbox est plus stable que le flotteur gauche.

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

Enveloppez simplement les éléments flottants dans un <div>et donnez-lui ce CSS:

.wrapper {

display: table;
margin: auto;

}

C'est peut-être ce que vous recherchez - 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>

.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}