L'alignement vertical ne fonctionne pas sur l'élément flexible

Question

J'ai essayé de centraliser verticalement du texte brut à l'intérieur d'un élément de boîte flexible.

J'ai décidé d'utiliser la propriété display:table-cell avec vertical-align: middle. Mais cela ne semble pas fonctionner correctement dans les éléments flexbox.

Comment puis-je le centraliser verticalement, idéalement sans utiliser de wrapper ou de positionnement, et tout en tronquant le long texte avec des ellipses?

.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    font-weight: 700; 
 
    border: 1px solid #d9d9d9; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.item { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    flex: 1 1; 
 
    background-color: cyan; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.item:nth-of-type(2n) { 
 
    background-color: aliceblue; 
 
}

<div class="container"> 
 
    <div class="item">Hello, I'm very very long string! Hello, I'm very very long string!</div> 
 
    <div class="item">Hello</div> 
 
    <div class="item">Hello</div> 
 
    <div class="item">Hello</div> 
 
</div>

View On CodePen

Answer 1

Une solution consiste à définir chaque élément flexible comme son propre conteneur flexible pour centrer verticalement son contenu avec align-items:center. Pour garder text-overflow fonctionnant, ajoutez un élément enfant à chaque élément flexible, qui peut ensuite être tronqué avec des ellipses.

Je ne peux pas fournir une explication succincte pour expliquer pourquoi text-overflow ne fonctionne pas avec display:flex et neither can David Wesst. Dans ses mots:

Il s'avère qu'il n'y a vraiment pas un moyen propre de le faire. Si vous vous demandez comment je suis arrivé à cette conclusion, vous pouvez arrêter parce que je ne l'ai pas fait. Les responsables de la spécification ont fait, et vous pouvez lire la conversation complète qui a commencé avec un Mozilla bug report et conduit à un whole mail group discussion sur les raisons pour lesquelles il devrait (ou, dans ce cas, ne devrait pas) être mis en œuvre dans le cadre de la spécification.

Voici un exemple de travail:

.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    font-weight: 700; 
 
    border: 1px solid #d9d9d9; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    align-items: center; 
 
    flex: 1; 
 
    background-color: cyan; 
 
} 
 

 
.item span { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.item:nth-of-type(2n) { 
 
    background-color: aliceblue; 
 
}

<div class="container"> 
 
    <div class="item"><span>Hello, I'm very very long string! Hello, I'm very very long string!</span></div> 
 
    <div class="item"><span>Hello</span></div> 
 
    <div class="item"><span>Hello</span></div> 
 
    <div class="item"><span>Hello</span></div> 
 
</div>

Voir aussi:
Setting ellipsis on text from a flex container

Answer 2

Blockquote ... float, clear et vertical-align n'a aucun effet sur un élément flexible. selon https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Voir How to vertically align text inside a flexbox? une solution possible.

Answer 3

Lorsque vous créez un élément dans un conteneur flexible (avec display: flex ou display: inline-flex), tous les enfants dans le flux deviennent des éléments flexibles.

Tous les articles flex ont leur valeur display contrôlée par le conteneur. Peu importe ce que vous spécifiez, le conteneur le remplace. Par conséquent, lorsque vous attribuez un élément flexible display: table-cell, le navigateur l'ignore. Voici à quoi il ressemble dans Outils Chrome Dev:

style Tab

Computed Tab

Un conteneur flexible "blockifies" articles flexibles, ce qui provoque eux d'assumer de nombreuses qualités d'éléments de niveau bloc (source).

Mais la propriété vertical-align s'applique uniquement aux éléments en ligne et cellule-cellule (source).

C'est pourquoi cela ne fonctionne pas. Quoi qu'il en soit, vertical-align, même si cela a fonctionné, est un hack totalement inutile dans ce cas. Il existe des propriétés flexibles conçues pour aligner le contenu dans les éléments flexibles.

.container { 
 
    width: 500px; 
 
    height: 500px; 
 
    font-weight: 700; 
 
    border: 1px solid #d9d9d9; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.item { 
 
    flex: 1 1; 
 
    display: flex; 
 
    justify-content: center; /* horizontal alignment, in this case */ 
 
    align-items: center;  /* vertical alignment, in this case */ 
 
    background-color: cyan; 
 
} 
 

 
.item:nth-of-type(2n) { 
 
    background-color: aliceblue; 
 
}

<div class="container"> 
 
    <div class="item">Hello</div> 
 
    <div class="item">Hello</div> 
 
    <div class="item">Hello</div> 
 
    <div class="item">Hello</div> 
 
</div>

Related posts:

• How to vertically align text inside a flexbox?
• Setting ellipsis on text from a flex container

Answer 4

Vous devez définir ces éléments aussi conteneurs souples, en utilisant le C suivant SS pour eux (pas d'affichage cellule de table ...):

display: flex; 
flex-direction: column; 
justify-content: center; 

.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    font-weight: 700; 
 
    border: 1px solid #d9d9d9; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    flex: 1 1; 
 
    background-color: cyan; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.item:nth-of-type(2n) { 
 
    background-color: aliceblue; 
 
}

<div class="container"> 
 
    <div class="item">Hello, I'm very very long string! Hello, I'm very very long string!</div> 
 
    <div class="item">Hello</div> 
 
    <div class="item">Hello</div> 
 
    <div class="item">Hello</div> 
 
</div>