Jack McKalling Posted September 15, 2006 Share Posted September 15, 2006 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. Link to comment Share on other sites More sharing options...
aspnetguy Posted September 18, 2006 Share Posted September 18, 2006 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. Link to comment Share on other sites More sharing options...
Jack McKalling Posted September 21, 2006 Author Share Posted September 21, 2006 May be true, I don't know about those browsers. But would the width style not be compulsory? Link to comment Share on other sites More sharing options...
aspnetguy Posted September 21, 2006 Share Posted September 21, 2006 yeah, you would have to set a pixel width for margin: auto to work Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now