text-align:center; doesn't work

Question

I have been messing around with the layout of my website and my text-align : center; stopped working that happened after i set all my divs position to relative to make the parent div change size when I add components to it with javascript.

Here are both of my CSS files:

You can see the new one in the JSfiddle link below.

jsFiddle: http://jsfiddle.net/2WvrV/

I also provide the code for the old website (which aligns the text properly) :

http://jsfiddle.net/fiddlerOnDaRoof/fQpjX/

the old HTML is very similar to the new version i just added the style="float:left;" in one of the divs

Answer 1

I just took a look at your code, I saw that all the elements needed to be properly spaced as in:

element{
    text-align: center;
};

where as you had:

element{
    text-align:center;
};

Also, you have some spelling errors:

element{
    magin-left: 9px;
};

Where it should be:

element{
    margin-left: 9px;
};

Answer 2

Here is another case why Text-align: center, didn't work.

You are using display:flex property in above Div, so you need to remove that and then try it will work.

Answer 3

You have forgot to add width: 100%; in your CSS class.

Answer 4

Finally figured it out. All i needed to do is to add clear:left; to my loginBttn div after that everything worked fine

thanks for trying to help everybody

Answer 5

Anywhere you have float:left; in your CSS, add width: 100%; after it. Floating will kill your desired center alignment.

Also, add text-align: center; to #login

Answer 6

Short answer: your text isn't centered because the elements are floated, and floated elements "shrink" to the content, even if it's a block level element.

Can you explain more what this means?

I had to set all my position to relative to make the parent div change size when I add components to it with javascript

Answer 7

try this. i guess it might help you

text-align:justify;