CSS垂直對齊，但不完全

Question

如何對齊文本塊，以使第一行的頂部比td的頂部低50％？

想象一下，但是第一行的頂部正好下降了50％。

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

我可以使用包含div和padding的方法來做到這一點，但是我想要純CSS選項在更改表高度，行高等時不會中斷。

編輯-

這是一個顯示正確的小提琴，但是使用了“ hack” css，如果我更改高度和其他功能，它將中斷。

http://jsfiddle.net/5q9K8/

它顯示正確，但我不想擁有該div。 我也不明白為什么填充率必須達到90％； 本來以為50％會做到這一點。

Answer 1

檢查此小提琴： 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元素占據TD空間的50％，以便文本從中間准確開始，並添加垂直對齊頂部以使文本頂部與中心對齊。

Answer 2

更改塊的邊距。 使用margin-top:50%;
或者嘗試vertica-align:center;
那會使它與中間對齊，我想這就是為什么您想要那50％