Html 在Jumbotron中垂直居中文本-赢得高度'；固有的

我希望

.jumbotron

div中的文本在div中间向下推，而不是悬停在顶部。我选择使用

填充顶部：50%

。相反，它在整个页面的中间居中，而不是在div的中间

div的高度由视口大小决定，因此它不是一个确定的数字。我在

#jumbotron header

中设置了要从父级

.jumbotron

继承的高度，但它忽略了继承的高度，仍然将整个页面居中50%

有人知道为什么身高没有遗传吗？这是否与使用vh作为高度而不是实数有关

HTML

---

不确定，但我认为在

%

中使用

填充

值会使

jumborton标头

下降

50%

，如果您在下面的代码段中看到，当删除

的
填充
并在
中添加
填充
值时，会使
jumborton标头
下降要居中且
高度
的文本也是
继承

如果您想查看，请参阅下面的代码段


.jumbotron{
背景：url（images/jumbo.png）无重复中心；
背景尺寸：封面；
最小宽度：100%；
高度：100vh；
边框：1px纯绿色；
填充：0！重要；
}
#台车式掘进机{
边框：1px纯红；
身高：继承；
填充顶部：50px；
填充底部：50px；
}

测试
Lorem ipsum Door sit amet，是一位杰出的献身者

不确定，但我认为在
%
中使用
填充
值会使
jumborton头
下降
50%
，如果您在下面的代码片段中看到，当移除
.jumborton
的
填充
并在
中添加
填充
值时使文本居中，
高度
也是
继承

如果您想查看，请参阅下面的代码段


.jumbotron{
背景：url（images/jumbo.png）无重复中心；
背景尺寸：封面；
最小宽度：100%；
高度：100vh；
边框：1px纯绿色；
填充：0！重要；
}
#台车式掘进机{
边框：1px纯红；
身高：继承；
填充顶部：50px；
填充底部：50px；
}

测试
Lorem ipsum Door sit amet，是一位杰出的献身者

如果您在
%
中给出
padding top
，它将根据其宽度而不是高度进行计算。这就是为什么它没有成为垂直中心。对于内部div的垂直对齐，可以使用以下命令，而不是填充

显示：表用于外部分区

然后显示：表格单元格和垂直对齐：中间用于内部div

.jumbotron {
    background: url(images/jumbo.png) no-repeat center;
    background-size: cover;
    min-width: 100%;
    min-height: 100vh;
    margin-bottom: 0 !important;

    display: table;

}

#jumbotron-header{
    display: table-cell;
    vertical-align: middle;
}

如果在
%
中给出
padding top
，它将根据其宽度而不是高度进行计算。这就是为什么它没有成为垂直中心。对于内部div的垂直对齐，可以使用以下命令，而不是填充

显示：表用于外部分区

然后显示：表格单元格和垂直对齐：中间用于内部div

.jumbotron {
    background: url(images/jumbo.png) no-repeat center;
    background-size: cover;
    min-width: 100%;
    min-height: 100vh;
    margin-bottom: 0 !important;

    display: table;

}

#jumbotron-header{
    display: table-cell;
    vertical-align: middle;
}

试试垂直对齐：中间也看看这个帖子：谢谢卡尔文。我很想使用垂直对齐：中间，但在我最初尝试时它似乎不起作用。感谢提供的资源，但我也想找出继承属性无法正常工作的原因。尝试垂直对齐：中间也请查看此帖子：谢谢calvin。我很想使用垂直对齐：中间，但在我最初尝试它时它似乎不起作用多亏了这些资源，但我也想弄清楚为什么inherit属性不能正常工作。
.jumbotron {
    background: url(images/jumbo.png) no-repeat center;
    background-size: cover;
    min-width: 100%;
    min-height: 100vh;
    margin-bottom: 0 !important;

    display: table;

}

#jumbotron-header{
    display: table-cell;
    vertical-align: middle;
}