1
votes

Comment aligner verticalement des articles de différentes tailles?

Je suis confronté à un problème d'alignement vertical des éléments lorsqu'un div contient des éléments enfants imbriqués, veuillez vérifier: https://codepen.io/akashpen0501/pen/rNaGgXv

Notez que le conteneur a une hauteur fixe de 200px et je veux que les enfants soient centrés verticalement

Résultat actuel:

Je veux tout aligner divs verticalement au centre, comme Requis:[

<div class="container">
  <div>left</div>
  <div>center<span class="nested child">nested content</span></div>
  <div>right</div>
</div>

.container {
  display: flex;
  flex-flow: row;
  align-items: center;
  border: 1px solid black;
  height:200px;
}

.container div {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

.container span {
  display: block;
}

Veuillez nous conseiller.

html css flexbox

5 commentaires

Vouliez-vous dire aligner horizontalement vers le haut?

@VarshaDhadge: Non, verticalement. Vous remarquerez que le div central est poussé vers le haut (la moitié) pour s'aligner avec les autres divs (gauche et droite)

align-items: center -> align-items: flex-start ?

Je recommande cet incroyable guide Flexbox sur css-tricks.com/snippets/ css / a-guide-to-flexbox

@TemaniAfif: Notez que le conteneur a une hauteur fixe de 200px et je veux que les enfants soient centrés verticalement, changer en flex-start les amène au sommet du conteneur. Codepen mis à jour pour refléter un div de hauteur fixe

4 Réponses :

4
votes

essayez align-items: flex-start sur le conteneur

<div class="container">
  <div>left</div>
  <div>center<span class="nested child">nested content</span></div>
  <div>right</div>
</div>

.container{
  display: flex;
  flex-flow: row;
  align-items: self-start;
  border: 1px solid black;   
}

.container div{
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

.container span{
  display: block;
}

1 commentaires

Notez que le conteneur a une hauteur fixe de 200px et je veux que les enfants soient centrés verticalement, changer en flex-start les amène au sommet du conteneur

0
votes

<div class="container">
  <div>left</div>
  <div>center<span class="nested child">nested content</span></div>
  <div>right</div>
</div>

.container {
      display: flex;
      align-items: flex-start; // <----- here
      border: 1px solid black;
    }
    
    .container div {
      margin: 10px;
      padding: 10px;
      border: 1px solid black;
    }
    
    .container span {
      display: block;
    }

0 commentaires

1
votes

Vous pouvez faire une approximation en utilisant l'alignement de la ligne de base et le pseudo élément. Modifiez baseline avec center dans l'exemple ci-dessous pour voir que la gauche / droite restera au même endroit.

<div class="container">
  <div>left</div>
  <div>center<span class="nested child">nested content</span></div>
  <div>right</div>
</div>

<div class="container">
  <div>left</div>
  <div>center</div>
  <div>right</div>
</div>

.container {
  display: flex;
  flex-flow: row;
  align-items: baseline;
  border: 1px solid black;
  height:200px;
  background:linear-gradient(red,red) center/100% 1px no-repeat
}
.container:before {
  content:"";
  height:calc(50% + 0.25em)
}
.container div {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

.container span {
  display: block;
}

0 commentaires

0
votes

Enveloppez vos composants enfants dans un

  et donnez ensuite la classe  .children  avec les propriétés suivantes, cela gardera votre contenu  aligné verticalement  et  horizontalement  à la même hauteur. <div class="container">
  <div class=children>
    <div>left</div>
    <div>center<span class="nested child">nested content</span></div>
    <div>right</div>
  </div>
</div>
  
 

.container {
  display: flex;
  flex-flow: row;
  align-items: center;
  border: 1px solid black;
  height:200px;
}

.container div {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

.container span {
  display: block;
}

.children{
  display: flex;
  align-items: flex-start;
}
.children{
  display: flex;
  align-items: flex-start;
 }

0 commentaires