yaragallamurali Posted May 27, 2013 Share Posted May 27, 2013 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 More sharing options...
terryds Posted May 28, 2013 Share Posted May 28, 2013 Try this code div {text-align: center;} Link to comment Share on other sites More sharing options...
yaragallamurali Posted May 28, 2013 Author Share Posted May 28, 2013 That will horizontally aligns the test in the center. But my main problem is "vertical alignment". how to vertically align text in the center? Link to comment Share on other sites More sharing options...
newseed Posted May 28, 2013 Share Posted May 28, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
yaragallamurali Posted May 28, 2013 Author Share Posted May 28, 2013 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 More sharing options...
newseed Posted May 28, 2013 Share Posted May 28, 2013 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 More sharing options...
yaragallamurali Posted May 29, 2013 Author Share Posted May 29, 2013 Thanks for the information. This really helps. Thank you. 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