如何垂直居中一個div的文本，無論文本有多少行

在下面的演示中，第一個div似乎是垂直居中，但第二個div沒有。如何垂直居中一個div的文本，無論文本有多少行

如何將CSS的通用類使它們都居中？換句話說，無論文本有多少行，我如何垂直居中文本的文本？

.divs { 
 
    /*position:absolute;*/ 
 
    font-size: 18px; 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    background-color: #ffcc99; 
 
    width: 140px; 
 
    height: 80px; 
 
    padding-top: 30px; 
 
    /*padding-bottom: 30px;*/ 
 
    margin-top: 0; 
 
    float: left; 
 
    margin-left: 98.5px; 
 
    word-wrap: break-word; 
 
    vertical-align: middle; 
 
    line-height: normal; 
 
}

<div> 
 
    <div class="divs">1234567890</div> 
 
    <div class="divs">123456789</div> 
 
</div>

來源

2015-10-17 問題大王

你是什麼意思？ http://jsfiddle.net/axw9ocne/ – MortenMoulder

我認爲這是你仍然需要表的一個例外，然後你在表單元上設置垂直對齊屬性。 – frenchie

https://css-tricks.com/vertically-center-multi-lined-text/ – MLeFevre

<div> 
<div class="divs">1234567890</div> 
<div class="divs">123456789</div> 
</div> 
<style> 
.divs{ 
    font-size: 18px; 
    box-sizing: border-box; 
    display: inline-block; 
    background-color: #ffcc99; 
    width:140px; 
    height:80px; 
    padding-top:30px; 
    /*padding-bottom: 30px;*/ 
    margin-top:0; 
    float:left; 
    margin-left: 98.5px; 
    word-wrap: break-word; 
    text-align: center; 
    line-height: normal; 
    width:inherit; 
} 
</style>

make如果你想要的文字對齊到中心在中間檢查這個link

來源

2015-10-17 11:28:13 WisdmLabs

該代碼通過更改div寬度將兩行粘合到一行中。對於我的項目，寬度必須固定，但無論如何感謝。 –

如何垂直居中一個div的文本，無論文本有多少行

回答

相關問題