CODEWITHSUNDEEP
htmlcssalignment
Jakob Nielsen
Jakob Nielsen

Reputation: 5198

Text align center wont work

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?

Upvotes: 1

Views: 12882

Answers (5)

Siamak Motlagh
Siamak Motlagh

Reputation: 5146

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

Upvotes: 5

Renārs Vilnis
Renārs Vilnis

Reputation: 1221

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.

Upvotes: 1

mrdanimal
mrdanimal

Reputation: 132

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.

Upvotes: 2

karacas
karacas

Reputation: 2142

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/

Upvotes: 1

Kevin Whatever
Kevin Whatever

Reputation: 184

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/

Upvotes: 2

Related Questions