0

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?

4
Contributors
11
Replies
44
Views
4 Years
Discussion Span
Last Post by Troy III
0

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>
0

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.

-1

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.

1

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!

0

here is your universal solution...

+1. Nice technique... I was not familiar with that approach. I dont seem to understand why it works.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.