Footer won't center :S_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-05 07:40 出处：网络

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.

相关专题：css

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;
}

Footer won't center :S

精彩评论

关注公众号

热门标签

图文推荐

Footer won't center :S

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：