垂直對齊文本不起作用

我要垂直對齊的綠地文本「網站名稱」。這是一個div內的H1文本。綠色背景是文本的背景，黃色背景是5px填充的div的背景。我無法解決如何垂直對齊文本。我已經試過了。

h1 { 
    text-align: center; 
    background-color: green; 
    height: 100%; 
    vertical-align: middle; 
    font-size: 25px; 
}

2017-03-01 Soccerlife

一點，你想垂直居中的綠色背景權內的文本？ –

是的，所以我認爲我的身高是100％ – Soccerlife

你的綠色容器是否有固定的高度？ –

嘗試

h1 { 
    height: 50px; 
    line-height: 50px; // height of your h1 
}

你可以安全地失去

vertical-align: middle; 
height: 100%;

性能。

Here是一個codepen。

此外，請參閱this SO answer進行更長的對話。正如在那裏指出的，這種解決方案很好，只有一行文字。

2017-03-01 18:46:35

你可以參考下面的鏈接。我試着在W3Schools的

2017-03-01 18:53:09 Sailor

回答