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?
There are two easy methods you can try: display the element as a table cell or using the line-height method. Take a look at the examples of both here: Vertically Center Content Using CSS
What do you mean? Like this?
<div style="height:200px;border: 2px solid red;text-align:center;">
This is my book.<br>I am so happy.
</div>
No, the text-align:center property will align it horizontally not vertically. People will naturally try vertical-align:middle but you'll find that wont work alone for the sceanario described.
vertically centering seems very hard.
Not at all. Did you try using the methods I suggested?
Hi i have looked at all the suggested methods. But there is a problem. "display:table" will not work in all the browsers. I mean all the users will not be using the latest browsers. Most of them must be 2-4 years old. So this will not definetly work on all browsers. "inline-height" is not the solutions as my div contains multiple lines of text. so still my problem is unsolved.
Hi i have looked at all the suggested methods. But there is a problem. "display:table" will not work in all the browsers. I mean all the users will not be using the latest browsers. Most of them must be 2-4 years old. So this will not definetly work on all browsers. "inline-height" is not the solutions as my div contains multiple lines of text. so still my problem is unsolved.
here is your universal solution:
<div style="height: 200px; border: 2px dashed silver;">
<span style="height:100%;display:inline-block;vertical-align:middle"></span>
<span style="display:inline-block">This is my book.<br>I am so happy.</span>
</div>
p.s.:
I've been answering this question since years...,
I've answered it here on several ocasions too!
Well, guess what, - nobody even bothered to at least say "it worked"! Let alone "thanks", or mark the thread as solved, etc, etc...
but, who cares? -Have fun!
are you having fun yaragalla mural?
here is your universal solution...
+1. Nice technique... I was not familiar with that approach. I dont seem to understand why it works.
...only now I finally get it.
-These guys are simply trying to keep it a Secret!?!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.