文字对齐中心不起作用

Question

On my website i have a position fixed footer, where i want to put centered text into. The strange thing is that, whatever im doing the text wont be centered, its always left instead.

<div id="footer">  
Copyright 2013 © LolStreamGallery - <a href="TermsofUse.html">Terms of Use</a>
</div>

CSS:

#footer {
    text-align:center;  
    position:fixed;
    bottom:0px;
    height:30px;
    background-color:#ededed;
    font-family: "Myriad Pro";
    font-size:14px;
}

Maybe you wann know the CSS of the Body also:

body {
    background-color:#ededed;
    /*text-align:left;*/
    margin:0;
    padding:0px; 
}

I have already tried to outcomment the body default align as you can see, but had no effect. Anybody a idea?

Answer 1

Change it to this:

#footer {
    text-align:center;  
    position:fixed;
    bottom:0px;
    height:30px;
    background-color:#ededed;
    font-family: "Myriad Pro";
    font-size:14px;
    width:100%; // added
}

jsFiddle Live Demo

Answer 2

Your footer needs to stretch across the bottom. Add a width:100% to your #footer style element.

#footer {
    text-align:center;  
    position:fixed;
    bottom:0px;
    height:30px;
    width:100%;
    background-color:#ededed;
    font-family: "Myriad Pro";
    font-size:14px;
}

http://jsfiddle.net/4zqbX/

Answer 3

When you set #footer to position: fixed , it doesn't have a width anymore. So technically, the content of #footer is still centered within #footer , but #footer takes it's width from the width of its content. So, you have to either get rid of position: fixed or give #footer a width. If you add width: 100% to #footer it should work.

Answer 4

Maybe you need add a width to your #footer

#footer {
    text-align:center;  
    position:fixed;
    bottom:0px;
    height:30px;
    background-color:#ededed;
    font-family: "Myriad Pro";
    font-size:14px;
    /*New*/
    width:100%;
}​

Test: http://jsfiddle.net/h6crw/1/

Answer 5

It is because the text is in the center of the div , but if add a border, you then see the div is just as big as the text.

Just add a width:100%; to the footer and your done.