在柔性容器項目上垂直居中文本

-1

我有這個codepen https://codepen.io/luisguerra/pen/prROqY，我試圖垂直居中每個項目中的文本。在柔性容器項目上垂直居中文本

我想要的原因是我不知道列表中有多少項目，我希望它們以相同的高度分佈並且每個項目都垂直居中（所有項目只應該有1行）身高：100％不行，想法？

.site-content { 
 
    height: 400px; 
 
} 
 

 
.menu { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 
.item { 
 
    flex: 1; 
 
}

<div class="site-content"> 
 
     <div class="menu"> 
 
     <div class="item">Lorem ipsum</div> 
 
     <div class="item">Lorem ipsum</div> 
 
     <div class="item">Lorem ipsum</div> 
 
    </div> 
 
</div>

來源

2017-08-07 Luis Guerra

'的line-height：100％;'並不是指父DIV高度，但當前的字體 - 尺寸。例如，如果您的'.item'類具有'font-size：12px;'和'line-height：200％;'，則行高將爲24px，即12px的200％。希望你能更好地理解行高。這是一個[** W3School **鏈接]（https://www.w3schools.com/cssref/pr_dim_line-height.asp），它完美地解釋了行高度是如何工作的 –

可能的重複[如何垂直對齊文本里面一個flexbox？]（https://stackoverflow.com/questions/25311541/how-to-vertically-align-text-inside-a-flexbox） – Rob

使用此代碼100％工作：

.site-content { 
 
    height: 400px; 
 
} 
 

 
.menu { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 
.item { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    text-align: center; 
 
}

<div class="site-content"> 
 
     <div class="menu"> 
 
     <div class="item">Lorem ipsum</div> 
 
     <div class="item">Lorem ipsum</div> 
 
     <div class="item">Lorem ipsum</div> 
 
    </div> 
 
</div>

來源

2017-08-07 07:27:18

不錯！這工作，我錯過了每個項目裏面的flex方向 –

如果這個答案對投票有幫助。 –

justify-content: center到.menu會幫助你，因爲你的flex-direction是column。

來源

2017-08-07 07:23:13 Abinthaha

在柔性容器項目上垂直居中文本

回答

相關問題