我如何在这个 div 中垂直居中这个文本（正常修复不起作用）？

Question

在这个网站 (http://whitewashed.richiesiegel.com/) 上这个页面上的文本当前有一个 padding-top 设置高度，但我想替换它以使其在 div 中垂直居中，但正常属性似乎没有工作。

CSS

#header {
    height: 100%;
    width: 100%;
    background-image:url(images/5pointz_white_door.jpg);
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
    vertical-align: middle;
} 

Answer 1

在标题中插入 p 并更改 css：

#header{
    height: 100%;
    width: 100%;
    background-image:url(images/5pointz_white_door.jpg);
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;   
    display: table;
}
#header p {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Answer 2

添加这个

#header {
    height: 100%;
    width: 100%;
    background-image:url(images/5pointz_white_door.jpg);
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
    vertical-align: middle;
    text-align: center;
} 

   #yourdiv {
        vertical-align: middle;
        text-align: center;
   }

Answer 3

这是有效的：

你必须添加另一个div元素

try

Answer 4

display:table 解决方案确实有效；但是，您必须将标题从页面顶部的导航栏下方推出。文本不会在标题 div 中居中显示，即使这是因为您的导航栏当前覆盖了部分标题。

您可以通过添加来解决此问题

#header{
padding-top:59px; <!-- the height of the nav bar -->
}

然后从标题元素中删除填充并添加

display:table-cell;

这个jsfiddle 展示了它是如何工作的（出于演示目的，我在标题上设置了一个高度，但我在您的实际站点上用 height:100% 对其进行了测试，它工作得很好）。

在制作小提琴时，我注意到另外两件事。我不认为标题中的每个文本元素都需要三个单独的类，因为它们都包含相同的代码，所以我在小提琴中制作了一个名为 .neue 的类。为什么不在 CSS 而不是 HTML 中为每个字体设置字体大小？