Question

在这个网站上（http://whitewashed.richiesiegel.com/）这个页面上的文字当前有一个填充顶部设置高度，但我想替换它在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

显示：表格解决方案确实有效;但是，您必须从页面顶部的导航栏下方推出标题。即使因为您的导航栏正在覆盖当前标题的一部分，文本也不会出现在标题div的中心。

您可以通过添加

来解决此问题

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

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

display:table-cell;

这个jsfiddle显示了它是如何工作的（为了演示目的，我在标题上设置了一个高度，但我在你的实际网站上测试了它的高度：100％并且它工作得很好）。

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

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

4 个答案: