Horizontal align

[Jack McKalling]

Hey, good you came here.Many people don't know how to horizontal align text or elements, they use margin:0 auto; but don't understand what exactly then this text-align:center; does, which seems to be specially for aligning, right?Well I don't go into that margin way, but I tested some things with this text-align. I have no other browser than IE unfortunately, so I can only guarantee it will work in IE. Don't know if it is also in the other browsers. My statement is as follows:

The style text-align does work for both block and inline elements. The magic lies in the placement of the style, either in the element or in its parent element. If you specify text-align in the element, it will align ALL its content. So to align an entire element, apply this style to its parent. To center the text of one element, simply apply the style to the element the text is in.

I have three examples, just check what the result is.

<div style="width:100%; text-align:center"> <div style="border:solid 1px black; width:50%; text-align:left">tekst</div></div><br /><div style="width:100%; text-align:center"> <div style="border:solid 1px black; width:50%">tekst</div></div><br /><div style="width:100%; text-align:left"> <div style="border:solid 1px black; width:50%; text-align:center">tekst</div></div>

Copy the text in this quote, save it in a plain file with .htm extension and see what it will result in. :)All three divs are in full width, each one with a child div of half that width. The first child div will be centered but without its content. The second child div will be centered including its own content. The last child div will not be centered, but true its own content will.I hope this helped many people who don't know how to center or in general align horizontally.

[aspnetguy]

Those will not work for FireFox or Opera you will have to add margin:auto tot he inner div to get ti to center....it would be easier to just have one div and use margin:auto in the first place.

[Jack McKalling]

May be true, I don't know about those browsers. But would the width style not be compulsory?

[aspnetguy]

yeah, you would have to set a pixel width for margin: auto to work