CSS中的垂直对齐文本不起作用答案

【问题标题】：Vertical align text in CSS doesn't workCSS中的垂直对齐文本不起作用
【发布时间】：2017-03-02 03:03:25
【问题描述】：

我想垂直对齐绿色空间中的文本“站点名称”。它是 div 内的 H1 文本。绿色背景是文本的背景，黄色背景是 div 的背景，内边距为 5px。我无法解决如何垂直对齐文本。这个我已经试过了。

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

【问题讨论】：

【解决方案1】：

试试

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

你可以放心地丢掉

vertical-align: middle; 
height: 100%;

属性。

Here 是一个密码笔。

另外，请参阅this SO answer 以获得更长的对话。如上所述，此解决方案仅适用于一行文本。

【讨论】：

【解决方案2】：

您可以参考以下链接。我在 w3schools 尝试了一下

【讨论】：