CSS垂直对齐，但不完全

Question

How do I have a block of text be aligned such that the top of the first line is 50% down from the top of the td?

So imagine this, but the top of first row is exactly 50% down.

--------------
|             |       
|             | 
|             |
|     xxxx    |
|   xxxxxxxx  |
|  xxxxxxxxxx |
|             |
|             |
--------------

I can do it with a containing div and padding, but I want pure css option that won't break if I change the table height, line height, etc....

Edit --

here is a fiddle that display correctly but uses "hack" css that will break if I change the height and whatnot.

http://jsfiddle.net/5q9K8/

It is showing correctly, but I don't want to have that div. I also don't understand why the padding-top needs to be 90%; would have thought 50% would do it.

Answer 1

Check this fiddle: http://jsfiddle.net/5q9K8/10/

HTML:

<table>
    <tr>
        <td>
            xxxx<br/>
            xxxxxx<br/>
            xxxxxxx
        </td>
        <td>
            xxxx
        </td>
    </tr>
</table>

Css:

td {
    height: 200px;
    border: 1px solid black;
    width: 100px;
    text-align: center;

    vertical-align:top;    
}
td:before{
    background: none repeat scroll 0 0 transparent;
    content: "";
    display: block;
    height: 50%;
}

Logic: Using before element to occupy 50% of the TD space so that text starts exactly from the middle & adding vertical align top to keep the text align top from center.

Answer 2

Change the margin of the block. Use margin-top:50%;
Or try a vertica-align:center;
That would align it to the middle, i suppose that's why you want those 50%