How To Align The Footer At The Bottom Center In HTML
I want to align the footer at the bottom center of the page but the code below doesnt work. Could you please tell me what changes should i make ?
Solution 1:
At first bottom
value should be in px
or %
. Check this CSS : BOTTOM , and it will work only if you combined it with any position
property, Check this CSS:POSITION
And if you want place the footer always at the bottom of your page you can use a combination of position:fixed
and bottom:<value>
.
And finally set the div width:100%
to make it occupy the whole width of the browser window
like this,
#footer {
bottom : 2px;
height : 40px;
margin-top : 40px;
text-align: center;
vertical-align: middle;
position:fixed;
width:100%;
}
Solution 2:
Try This code:
<style type="text/css">
#footer {
bottom : 2;
padding-bottom: 0;
height : 40px;
margin-top : 40px;
margin: auto;
width: 50%;
text-align: center;
}
</style>
<div id="footer">Terms and Conditions </div>
You can change the width according to your wish
Solution 3:
To center most things you need to define a width, and then let auto-margins take over the rest.
<style type="text/css">
#footer {
bottom : 2;
height : 40px;
text-align: center;
vertical-align: middle;
width:950px;
margin:40px auto 0;
}
</style>
Solution 4:
Try this
#footer {
height: 100px;
margin-top: -50px;
position: fixed;
bottom:0;
width: 100%;
z-index: 1;
text-align:center;
}
Post a Comment for "How To Align The Footer At The Bottom Center In HTML"