vertcally and horizontally lining text at center in div

[yaragallamurali]

Hi the following is my code:- <div style="height:200px;border: 2px solid red"> this is my book.<br>I am so happy.</div> I have to vertically align the text in center of the div. I will have multiple lines of text. Can anyone help me solve this?

[terryds]

Try this code

div {text-align: center;}

[yaragallamurali]

That will horizontally aligns the test in the center. But my main problem is "vertical alignment". how to vertically align text in the center?

[newseed]

If one line then you can set the line-height to be equal the height of the div. However, in your case you have two lines. Set the div box to use display: table; Now set the text to use the <p> (paragraph) tag. Apply this css to it: p {display: table-cell; vertical-align: middle; text-align: center;}

Edited May 28, 2013 by newseed

[yaragallamurali]

Hi Thanks for your reply. "display:table" does not work in all the browsers. I mean customer does not use only the latest browsers. They might be 2-3 years old. In those browsers this will not definitely work.

[newseed]

The css is supported from IE8 or newer. If your target audience is IE7 then you will either have to find a javascript method or add the necessary padding/margins to align them vertically. As for IE7, it's not 2-3 years old. More like 7 years old and it has been superseded by IE8 since 2009 and is no longer supported.

[yaragallamurali]

Thanks for the information. This really helps. Thank you.