web-dev-qa-db-fra.com

Aligner au centre plusieurs enfants DIV

Je trouve cela un peu déroutant de contourner ce problème.

J'ai un parent DIV et 3/plusieurs enfants DIV.

Le DIV parent est aligné au centre et le DIV enfant doit flotter à gauche mais doit être aligné au centre.

[~ # ~] css [~ # ~] contient,

.center {
   float:left;
   height:250px;
   width:15%;
   margin: 0 auto;
   border: 1px solid black;
}

J'ai un exemple du lien de code ici ...

csscss-float
18
Santosh

Si vous souhaitez aligner horizontalement vos éléments au centre, ne les faites pas flotter.

Modifiez leur mode d'affichage en inline-block et alignez-les au centre en changeant le text-align le style de leur parent:

#parent {
    text-align:center;
    height:450px;
    width:75%;
    border:1px solid blue;
}
.center {
    display:inline-block;
    height:250px;
    width:15%;
    margin: 0 auto;
    border: 1px solid black;
}
<div id="parent">
    <div id="child1" class="center"></div><!--
 --><div id="child2" class="center"></div><!--
 --><div id="child3" class="center"></div>
</div>

Assurez-vous de ne pas laisser d'espace blanc ni de nouvelle ligne entre vos enfants <div>s (dans votre HTML, c'est-à-dire) ou commentez-le. Maintenant que ce sont des éléments inline, cet espace blanc sera interprété comme un espace.

33
George

Les marges automatiques ne s'appliqueront pas à un élément auquel un flottant est appliqué. Le retrait du flotteur devrait vous aider à démarrer ...

2
AGB

Ajoutez cette propriété à la classe div CSS en bas assurez-vous que l'enfant ne dépasse pas la hauteur de div correspondante

min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
0
sourav pandit