Jump to content

vertcally and horizontally lining text at center in div


yaragallamurali
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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 by newseed
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...