Menu
I'm having trouble centering my footer to the bottom of the page. Here's my code
footer {
background-color: #FFF;
position:fixed;
bottom: 0px;
width: 400px;
text-align: center;
}
<footer align="center">
<p>March 25, 2</p>
</footer>
727
Keep the footer at the bottom by using Flexbox Make sure that you are wrapping everything in a <div> or any other block-level element with the following CSS styles: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .
The reason your footer is only halfway down the page with position: absolute is that you haven't set a min-height on the body and html elements. Without that, the body only takes up as much space as you have content for it -- and then the footer is aligned with that bottom, not the bottom of the window.
When the footer margins are too narrow or the padding is too wide, the footer position shifts and can move to the middle of the Web page. One easy solution is to remove the margins and padding entirely, so that those footer properties correspond to the rest of the coding.
Add {text-align: center} to your footer region or block. You could specify a width for your block and add {margin: 0 auto}.
Just set width to 100%
width: 100%;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
