Footer won't center :S
I have a problem with my footer. Darn footer always.
Anyway, it won't show up in the center of the page. I tried using text-align:center & margin:auto but it won't come off the left side.
I'm going to post the code here; maybe you can find the problem?
HTML
<div id="footer">
<div class="footertxtl">
</div>
<div class="footertxtr">
</div>
<div class="designer">
</div>
</div>
CSS
#footer {
background-image:url(images/footer/footer.png);
background-repeat:no-repeat;
text-align:center;
height:223px;
c开发者_如何学Pythonlear:both;
position:relative;
width:100%;}
.footertxtl {
font-size:10px;
text-align:left;
float:left;
padding-left:60px;
padding-top:165px;
height:auto;
width:auto;}
.designer {
font-size:10px;
text-align:center;
padding-top:205px;
height:auto;
width:auto;}
.footertxtr {
text-align:right;
float:right;
font-size:10px;
padding-right:24%;
padding-top:155px;
height:auto;
width:auto;}
Your footer is set to 100% width which means it will always fill the whole width of the body, unless it is contained within another div.
As a result, the footer is 100% width, with one div floating to the left, another to the right, and the other relative.
Give the #footer a fixed width, then give it margin: 0 auto; this will position this div in the center
Can you post a jsfiddle example? If you have a container within your #footer which is not 100% wide, you can use margin:0 auto; to centre it.
If you do not set constant width, then it is set by default to 100%. Your "width: auto" does not behave as you expected. If you do cannot set constant width and you do not mind about IE7, you could do like this:
#footer{
float: left;
display: inline-block;
}
Remember about adding overflow: hidden; to parent div
If you have a wrapper for the rest of the page that set's either a fixed width or a percentage (75%) then stick the footer inside the wrapper
<body style="text-align: center;">
<div id="wrapper" style="text-align: left; width: 80%; margin: 0 auto;">
<div id="Header">............</div>
<div id="MainContent">.......</div>
<div id="Footer">input content here</div>
</div>
</body>
the wrapper will automatically center all of the content
#footer {
background: transparent url(images/footer/footer.png) no-repeat left top;
text-align:center;
height:223px;
clear:both;
}
加载中,请稍侯......
精彩评论