Question

我有以下代码，它们以jumbotron为中心的顶点和水平。

CSS

#s-text { 
text-align: center;
width: 65%;
margin: 0 auto;
}

.jumbotron { 
position: relative;
min-height: 600px; 
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0; padding: 0;
border-radius: 0 !important;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

<div class="row">
    <div class="jumbotron" style="...">
        <div id="s-text">
            <h2> <?php the_secondary_title(); ?> </h2>              
            <p> ... more content ... </p>
        </div><!-- end of s-text-->
    </div>    
</div>

我有一个100px标头固定在页面顶部，所以顶部需要一个100px的上边距/填充/空间，所以它们不重叠，但是带有flex的居中似乎不允许< / p>

Answer 1

首先，我认为#s-text的额外flexbox不是必需的。即使在.jumbotron内有多个子项，也只能使用一个flexbox。 text-align: center所有孩子的#s-text就足够了。（继承孩子的可能性）

主要问题：在我们深入研究疯狂事物之前，这是一个相当明显的方法，我们都知道，在连续工作12小时的情况下，在很多情况下都很容易监督：D

布局是否允许.row上的填充/边距？

为柔性居中添加上边距

1 个答案: