CODEWITHSUNDEEP
htmlcssflexbox
user3550879
user3550879

Reputation: 3469

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

Upvotes: 0

Views: 39

Answers (1)

katerlouis
katerlouis

Reputation: 771

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?

Upvotes: 1

Related Questions