How to set the text in a footer center?

#1

when I was editing the footer, I want to set the text"Sarah copyright@2017" center.
This is my code:

        <div id="footer" class="bg-primary">
                <div class="navbar navbar-fixed-bottom">
                    <div class="container">
                        <p class="text-center">Sarah copyright@2017</p>
                    </div>
                </div>
        </div>

but the result is:

image
image1350Ă—62 4.01 KB

please give me some help!Thanks!

#2

Do you have a codepen link?

#3

this is the link:

I have not finished the page,so it is a debug version.

Thanks a lot!

#4

The <div class="navbar navbar-fixed-bottom"> turns the container div into a flex container, so the width of the <p> inside only takes as much as it needs (and any text centering would have no noticeable effect). Try removing the navbar div, then change the <p>'s class to text-center.

After that the <p>'s bottom margin will “leak out” of the div, causing a white area at the bottom. You can remove this by setting the container div’s bottom padding to some value.

1 Like