How can I center couples lines of text vertically?

Question

I am trying to center some 3 lines text vertically on this example that i am playing with

http://thejit.org/static/v20/Jit/Examples/Treemap/example1.html#

But i noticed I cannot use line-height or height in this situation. Is there any other way of vertically centering without using height or line height?

//this code below doesnt work right

.node {line-height:8em;}
.node p {display:inline;display:inline-table;display:inline-block;
            vertical-align:middle;}

for example it also moves the group title to the center of the other node. for example "Incobus","Kram" etc will move to the node below -- whihc break the treemap inaway — user244394, Oct 25 '11 at 02:53
possible duplicate of [How to align text vertically center in div with css?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — user, Mar 09 '14 at 18:06

score 3 · Answer 1 · answered Oct 25 '11 at 02:33

3

You could try display:table and vertical-align:middle

So, it would be something like

.node{
    display:table;
}

.node p{
    display:table-cell;
    vertical-align:middle;
}

Not sure it would work given the current layout of the example.

answered Oct 25 '11 at 02:33

Jason Gennaro

34,535
8
65
86

How can I center couples lines of text vertically?

1 Answers1