Question

如何对齐文本块，使第一行的顶部距离td的顶部向下50％？

所以想象一下，但第一行的顶部恰好是50％。

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

我可以使用包含div和padding来实现它，但是如果我改变表高度，行高等等，我想要纯粹的css选项不会中断....

编辑 -

这是一个正确显示的小提琴但使用＆＃34; hack＆＃34;如果我改变高度和诸如此类的话，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％的

css垂直对齐，但不完全

2 个答案: