css - CSS 中的垂直对齐文本不起作用

Question

我想垂直对齐绿色区域中的文本“SITE NAME”。 它是 div 中的 H1 文本。绿色背景为文本背景，黄色背景为div背景，内边距为5px。我无法解决如何垂直对齐文本。我已经试过了。

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

Answer 1

尝试

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

你可以安全地失去

vertical-align: middle; 
height: 100%;

属性。

Here是代码笔。

另请参阅 this SO answer进行更长时间的对话。如此处所述，此解决方案仅适用于一行文本。