Vertical-align在flex項上不起作用

我試圖垂直集中flex盒元素中的純文本。Vertical-align在flex項上不起作用

我決定使用屬性display:table-cell與vertical-align: middle。但它似乎不能在Flexbox元素中正常工作。

我怎樣才能垂直集中它，理想情況下不使用包裝或定位，並仍然用橢圓截斷長文本？

.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

來源

2017-10-20 Mike Mameko

一種解決方案是，以限定每個FLEX項作爲其自身的柔性容器，以垂直居中其內容與align-items:center。要保持text-overflow正常工作，請爲每個Flex項目添加一個子元素，然後使用省略號將其截斷。

對於爲什麼text-overflow不適用於display:flex和neither can David Wesst，我無法提供簡潔的解釋。用他的話說：

事實證明，真的沒有一個乾淨的方法來做到這一點。如果你想知道我如何得出這個結論，你可以停下來，因爲我沒有。那些負責說明的人員，你可以閱讀以Mozilla bug report開頭的完整對話，並導致whole mail group discussion關於爲什麼它應該（或在這種情況下不應該）作爲規範的一部分來實現。

這裏有一個工作示例：

.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>

另見：
Setting ellipsis on text from a flex container

來源

2017-10-20 17:00:04 showdev

塊引用... float，clear和vertical-align有柔性的項目沒有影響。根據https://css-tricks.com/snippets/css/a-guide-to-flexbox/

參見How to vertically align text inside a flexbox?爲可能的解決方案。

來源

2017-10-20 16:45:28 beltouche

將元素設置爲彈性容器（使用display: flex或display: inline-flex）時，所有流入的子元素都會變爲彈性項目。

所有彈性項目都有其容器控制的display值。無論您指定什麼，容器都會覆蓋它。

所以當你給一個彈性項目display: table-cell時，瀏覽器會忽略它。下面是它看起來像在Chrome瀏覽器開發工具：

樣式選項卡

已計算標籤

Flex容器「blockifies」柔性項目，引起他們承擔塊級元素的許多質量（source）。

但vertical-align屬性僅適用於內聯級和表格元素（source）。

這就是爲什麼它不起作用。

無論如何，vertical-align，即使它工作，在這種情況下是一個完全不必要的破解。有彈性屬性設計用於對齊彈性項目中的內容。

.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>

來源

2017-10-20 16:57:16

問題被改變。長文本不在原始代碼中。所以現在這個答案涵蓋了新問題的對齊部分，但不包括省略號部分。 –

你必須定義這些項目還爲Flex容器，使用下面的C SS爲他們（沒有表存儲單元顯示...）：

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>

來源

2017-10-20 16:58:05 Johannes

沒有省略號的文字... – LGSon

Vertical-align在flex項上不起作用

回答

相關問題