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; }