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

Question

我想在绿色空间中垂直对齐文本'SITE NAME'。 它是div内的H1文本。绿色背景是文本的背景，黄色背景是div的背景，填充为5px。我无法解决如何垂直对齐文本。我已经试过了。

<ScrollViewer>
  <UserControl>
    <Grid>
      <Expander>
        ...
      </Expander>
      <Expander>
        ...
      </Expander>
      <Expander>
        ...
      </Expander>
    </Grid>
  </UserControl>
</ScrollViewer>

Answer 1

尝试

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

你可以安全地失去

vertical-align: middle; 
height: 100%;

性质。

Here是一个代码。

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

Answer 2

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

https://www.w3schools.com/css/tryit.asp?filename=trycss_align_line-height