Menu
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
555
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.
text-align and inline-block Simply add text-align center to parent div and set the child div display to inline-block. This will force our div to behave like inline element and therefore subjected text-align center.
The text-align property with the value center is the most popular technique to center text in a div. Setting the line-height of your div to half of its height will align all of the text in it horizontally in the middle of the container (or width).
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
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
