Member Avatar for yaragalla_mural

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
  • 370 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

A practical modern answer: make the container a flexbox and let the alignment properties do the work. This handles any number of lines without relying on line-height tricks:

<div style="height:200px; border:2px solid red; display:flex; align-items:center; justify-content:center;">
  This is my book.<br/>I am so happy.
</div>

Flexbox centers content on the block (vertical) axis with align-items: center, and on the inline (horizontal) axis with justify-content: center. (developer.mozilla.org)

If you must support very old browsers (IE9 and earlier), provide a fallback. One simple, widely compatible approach is CSS table layout:

<div class="box">
  <div class="cell">
    This is my book.<br/>I am so happy.
  </div>
</div>
.box  { height:200px; border:2px solid red; display:table; width:100%; }
.cell { display:table-cell; vertical-align:middle; text-align:center; }

Note: vertical-align applies only to inline/inline-block/table-cell contexts (it will not vertically center a plain block element by itself). Check current browser support for flexbox before dropping legacy fallbacks. (developer.mozilla.org)

A few practical notes tied to the thread: was right to call out table-cell and line-height — line-height only works when the text is a single line. ’s text-align:center only affects horizontal alignment. ’s inline-block spacer is a clever legacy hack if you must support ancient browsers, but prefer progressive enhancement: flexbox for modern UAs with the table fallback for old ones.

Finally, avoid centering long paragraphs — centered multi-line copy is harder to read; reserve centered blocks for short labels, headings or tiny captions. If content can grow, prefer min-height and let the block expand (or add overflow:auto) so text never gets clipped. (w3.org)

Recommended Answers

All 11 Replies

Member Avatar for JorgeM

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

Member Avatar for poopuh

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>
Member Avatar for JorgeM

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.

Member Avatar for yaragalla_mural

vertically centering seems very hard.

Member Avatar for JorgeM

Not at all. Did you try using the methods I suggested?

Member Avatar for yaragalla_mural

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.

Member Avatar for JorgeM

This article explains how to address IE 7 and earlier.

Member Avatar for Troy III

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!

Member Avatar for Troy III

are you having fun yaragalla mural?

Member Avatar for JorgeM

here is your universal solution...

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

Member Avatar for Troy III

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