how to center a footer div on a webpage

Viewed 105200

I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?

This is my html mark up:

<div id="footer">
   <p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div> 

Which css property can I use to solve this problem? A sample would be appreciated. Thanks.

9 Answers

I used this code for bottom copyright.

.footer-copyright {
    padding-top:50px;
    display: table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
    #Panel01 {

    vertical-align:bottom;
    bottom: 0;
     margin-left:auto;
     margin-right:auto;
     width: 400px;
    height: 100px;
}

Notes:

  • #Panel1 is the id for a DIV and the above code is CSS.
  • It is important that the DIV is large enough to contain the items within it.
Related