css垂直对齐，但不完全

Question

如何对齐文本块，以使第一行的顶部从 td 的顶部向下 50%？

想象一下，但第一行的顶部正好下降了 50%。

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

我可以使用包含 div 和 padding 的方式来做到这一点，但我想要纯 css 选项，如果我更改表格高度、行高等，它不会中断......

编辑 --

这是一个正确显示的小提琴，但使用“hack”css，如果我改变高度等等，它会中断。

http://jsfiddle.net/5q9K8/

它显示正确，但我不想拥有那个 div。我也不明白为什么 padding-top 需要为 90%；会认为 50% 的人会这样做。

Answer 1

更改块的边距。 使用margin-top:50%;
或尝试vertica-align:center;
这会使它与中间对齐，我想这就是你想要那些 50% 的原因

Answer 2

检查这个小提琴：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%;
}

逻辑：使用 before 元素占据 50% 的 TD 空间，使文本完全从中间开始并添加垂直对齐顶部以保持文本从中心顶部对齐。