Aligner un flotteur: gauche div pour centrer?

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

Le plus proche de ce que je veux est de les placer dans des divisions qui flottent: à gauche. Le problème est que je veux que les conteneurs soient alignés au centre et non à gauche. Comment puis-je atteindre cet objective.

use display:inline-block; au lieu de float

vous ne pouvez pas centrer les flotteurs, mais les blocs en ligne centrés comme s’ils étaient en texte, donc sur le conteneur extérieur global de votre “ligne” – vous définiriez text-align: center; alors pour chaque conteneur image / légende (ce sont ceux qui seraient inline-block; ), vous pouvez réaligner le texte à gauche si vous avez besoin

Nous vivons en 2018 maintenant et CSS Flexbox est bien pris en charge . Allez ici pour un bon tutoriel sur flexbox.

Cela fonctionne bien dans tous les nouveaux navigateurs:

 #container { display: flex; display: -webkit-flex; /* Safari 8 */ flex-wrap: wrap; -webkit-flex-wrap: wrap; /* Safari 8 */ justify-content: center; -webkit-justify-content: center; /* Safari 8 */ } .block { width: 150px; height: 150px; background-color: #cccccc; margin: 10px; } 
 
1
2
3
4
5

essayez comme ceci:

  
IMG HERE
IMG HERE
IMG HERE

Il suffit de placer des éléments flottants dans un

et de lui donner ce CSS:

 .wrapper { display: table; margin: auto; } 

Peut-être que 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:

 
1
2
3
 .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; }