How to set the text in a footer center?

Sarah · 2017-12-04 06:38:40 UTC

when I was editing the footer, I want to set the text"Sarah [email protected]" 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 [email protected]</p>
                    </div>
                </div>
        </div>

but the result is:

please give me some help!Thanks!

kevcomedia · 2017-12-04 06:42:29 UTC

Do you have a codepen link?

Sarah · 2017-12-04 06:49:32 UTC

this is the link:

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

Thanks a lot!

kevcomedia · 2017-12-04 06:56:52 UTC

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.