Vertically Center Multi-Lined Text

If you only have a single word or a single line of text, there is a clever way to vertically center it in a block with CSS. You set the line-height of that text to be equal to the height of the box. Works great, but is a major fail if that text needs to wrap.

A "speech bubble" is a classic example of somewhere we might want text to be centered both horizontally and vertically and be adaptable to multiple lines. There is a little, fairly simple CSS trick for this, using CSS tables. Here is the outcome:

The "bubble" we'll set to display: table;, which really doesn't do much by itself, but then we can set the <p> element inside to be a table-cell, which allows us to use the vertical-align property on it.

UPDATE 4

Related

Comments

Ha! Well, yes, that’s true, in general I do not. But I don’t like them because of how they don’t offer anything that table markup doesn’t already do. Wow I can make this div behave like a table cell! Why not just use a table cell?

In this case, we save markup by using it AND exploit it’s unique property of allowing vertical-align. So it’s not deception, it’s just a nice trick.

Well done Chris. I like how the above mentioned “I thought you didn’t like display:table?.” And irregardless of whether you like it or not you still dove into it to find how it actually can be useful. Definitely the signs of a css fanatic :) Well done.

DN is right, expressions can cause memory leaks. In this case that is not happening, but there is a one performance issue: expression is running all the time (when you move your mouse, when you scroll, etc..). So to avoid this, you can use this small Javascript code for IE 6 and 7 (put it at the end of HTML body):

No, it’s not a hack. It’s using CSS for presentation…which is what it’s meant to be used for. Using a table in this instance would be a hack. And the code’s not confusing at all, unless you just don’t know CSS much yet.

It’s not outright avoidance, just using it properly. Since a speech bubble consisting of a single paragraph can’t be considered tabular data, it would be inappropriate to use it in this context. On the other hand, tables are great for multi-column, multi-row data storage.

You are so very right.
it is fairly knows that advanced CSS should not be used until all major browser supports it.

this article makes nothing new to no-one , and there is no TRICK. here,
its just CSS everyone ALWAYS knew was there, but wouldn’t use it, cause
of IE’s lack of support. so.. i’m still not gonna use it. for now :)

I personally don’t find it necessary for everything to look exactly the same in all browsers, and this is a good example of a place where a minor difference makes a modern browser look good and a legacy browser still function properly.

To meet halfway, you could use display:table-cell and the vertical-align in conjuction with some vertical padding — that way even older browsers won’t look crowded and sad.

Brilliant solution to an oft problem. Block items of variable size can present quirky problems when centering both horizontally and vertically. CSS tables will provide a (not so ideal) workaround for these issues.

This is really cool and James John Malcolm’s technique is a great solution to handle IE. By the way.. wouldn’t that work cross-browser? Since the extra markup anyways will need to be there, might as well only use James CSS and skip the table technique?

It’s about time every developer put a huge horrible warning at the top of each page that showed on <=IE7 users’ machines. Then hopefully soon we can rid the world of those Microsoft internet crimes and save ourselves LOTS of time!

So funny that we’re using CSS (IE8!) to mimic the behaviour of table cells when we were told that tables were the devil’s plaything. Amazing how many hoops and conditional statements you have to jump through to get the same result a v4 browser would’ve easily coped with using tables (and it was happily cross-browser). Have we all gone mad?

Awesome post. Seems to me the CSS3 folks need to create a multi_center option. I understand there’s more rendering math needed for such an option, so it’s reasonable to distinguish it from simply ‘center’ for sake of performance. That said, this is my 3rd CSS3 project, and you’d think this wouldn’t be such a difficult task. Easily one of the top ‘harder than it looks’ styles.

This comment thread is closed. If you have important information to share, please contact us.