Comment faire pour centrer les Divs flottants dans un Récipient
Est-il possible de centrer les divs flottants dans un récipient et si oui, comment?
Par exemple j'ai une page avec un div conteneur contenant des lots de taille variable (généré dynamiquement) flotté (à gauche) divs. Les divs déborder sur la ligne suivante regulièrement mais ils ne sont jamais centré dans le div conteneur, au lieu alined avec la gauche. Il ressemble à ceci:
----------------------------
- -
- +++ +++++ ++++ ++ -
- +++ +++++ ++++ ++ -
- -
- ++ ++++++ +++ + -
- ++ ++++++ +++ + -
- -
----------------------------
Alors que je voudrais que les divs flottants centré dans le conteneur comme ceci:
----------------------------
- -
- +++ +++++ ++++ ++ -
- +++ +++++ ++++ ++ -
- -
- ++ ++++++ +++ + -
- ++ ++++++ +++ + -
- -
----------------------------
Merci,
DLiKS
- Avez-vous de la recherche à tous pour cette question?
- Dupe de: stackoverflow.com/questions/1269245/...
- J'ai répondu à cette ici
Vous devez vous connecter pour publier un commentaire.
C'est possible. À l'aide de http://www.pmob.co.uk/pob/centred-float.htm et http://css-discuss.incutio.com/wiki/Centering_Block_Element comme une source.
Ici est un violon démontrer le concept, en utilisant le HTML et le CSS à partir de ci-dessous: https://jsfiddle.net/t9qw8m5x/
C'est le minimum CSS nécessaire pour l'effet:
Explication:
Commencer avec juste la
li { float: left; }
règle. Ensuite, enveloppez ces flotteurs dans leleft: 50%; relative position
, de sorte que le bord gauche de la<ul>
's box est dans le centre horizontal de la page, puis utilisez les règles en#outer
à le régler correctement de sorte que le centre de#inner
est aligné avec la page.Calculer le montant total de l'espace de l'écran largeur que la mise en page souhaitée occupera ensuite de prendre le parent de même largeur et de les appliquer margin:auto.
CSS:
HTML:
Avec CSS3, vous pouvez également réaliser cela avec flexbox:
HTML:
Min CSS:
Violon (avec un certain style pour la visualisation): https://jsfiddle.net/k5o37dff/4/
Plus sur flexbox: https://www.sketchingwithcss.com/samplechapter/cheatsheet.html
Prise en charge du navigateur: https://www.w3schools.com/cssref/css3_pr_flex.asp
Une belle astuce pour centre de "div" élément est de définir "margin: auto", il va centrer.
OU