Question

我希望.jumbotron div中的文本在div之间向下推，而不是向顶部盘旋。我选择使用padding-top: 50%。相反，它在整个页面的中间位置居中，而不是在div的中间。 http://jsfiddle.net/Lvegtyvo/

div的高度由视口大小决定，因此它不是一个确定的数字。我将#jumbotron-header中的高度设置为从父.jumbotron继承，但它忽略了继承的高度，并且仍然在整个页面中居中50％。

有没有人知道为什么不继承高度？是否与使用vh作为高度而不是实数？

HTML

<div class="jumbotron text-center img-responsive" id="jumbotron">
    <div id="jumbotron-header">
        <h1>test</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
    </div>
</div>

CSS

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

}

#jumbotron-header{
    height: inherit;
    padding-top: 50%;
}

Answer 1

不确定，但我认为在fin中使用padding值会导致%向下jumborton header，如果您在下面的代码段中看到删除时50% } padding并在.jumborton的{{1}}中添加padding值，使文本位于中心，px也是#jumborton-header

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

height

inherit

Answer 2

如果您在padding-top中提供%，则会根据其宽度而不是其高度进行计算。这就是它没有成为垂直中心的原因。您可以使用以下内容来实现内部div的垂直对齐，而不是填充。

外部div

显示：表。

然后显示：table-cell 和 vertical-align：middle 为内部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;
}

在Jumbotron中垂直居中的文本 - 高度赢得了inheirit

2 个答案: