user3550879 user3550879 - 1 year ago 76
CSS Question

adding a top margin to flex centering

I have the following code which centers vert and horiz a div inside the jumbotron.


#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-->

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 Source

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?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download