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.

This article explains how to address IE 7 and earlier.

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!?!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.