user3550879 user3550879 - 5 months ago 14
CSS Question

adding a top margin to flex centering

I have the following code which centers vert and horiz a div inside the 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>


I have a 100px header fixed to the top of the page so there needs to be a 100px top margin/padding/space at the top so they don't overlap but the centering with flex doesn't seem to allow that

Answer

First of all I think the additional flexbox for #s-text is not necessary. Even with more than one child inside .jumbotron it should be possible only with one flexbox. text-align: center on all children of #s-text should suffice. (inherit on children possible)

To the main problem: before we get too deep into crazy things a rather obvious approach, which we all know is simple to oversee in too many cases while working for 12 hours straight :D

Does the layout allow padding / margin on .row?