垂直对齐文本不起作用

我要垂直对齐的绿地文本“网站名称”。这是一个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

回答