CSS垂直對齊，但並不完全

我希望如何文本塊對齊，使得第一線的頂部是50％，從TD的頂部向下？CSS垂直對齊，但並不完全

所以，想象一下這一點，但第一排的頂部正好是50％下降。

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

我可以用一個包含分區和填充做到這一點，但我想如果我改變桌子的高度，行高，等等，不會打破純CSS選項....

編輯 - -

這裏是正確顯示，但使用「黑客」 CSS如果我改變高度和諸如此類的東西，這將打破小提琴。

http://jsfiddle.net/5q9K8/

它顯示正確，但我不希望有該分區。我也不明白爲什麼填充頂部需要90％;會想到50％會這樣做。

來源

2014-04-17 hvgotcodes

是這樣的？ [** DEMO HERE **]（http://jsfiddle.net/Ruddy/5q9K8/5/） – Ruddy

接近，但在這種情況下與單線路的TD應垂直對齊中間和其他的第一行td應該與它對齊。 – hvgotcodes

-1

更改塊的邊距。使用margin-top:50%;
或者嘗試一個vertica-align:center;
這將它對準中間，我想這就是爲什麼你要這50％

來源

2014-04-17 14:23:16 Heatmanofurioso

告訴我它的工作 – hvgotcodes

@hvgotcodes它在你的提琴，如果你刪除'高度的小提琴：100％''從.x' – fiction

接近，但如果我這樣做頂行不對齊。 – hvgotcodes

檢查此琴：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%; 
}

邏輯：使用之前元素佔據TD空間的50％，以便文本從中間開始精確地加入垂直對齊頂部以保持文本與頂部對齊。

來源

2014-04-17 14:41:48

@小說真的嗎？所以如果我把'width'改成'200px'（這等於'height'）怎麼辦？http://jsfiddle.net/viphalongpro/5q9K8/6/ –

好我可以幫忙，邊框意味着填充將會算作高度的一部分，這意味着即使在應用50％填充之後，在這種情況下高度的總和也將是200px。 –

單線的td應該看起來好像垂直對齊是中間的，多線td的第一條線應該與單線對齊。在你的例子中，文字太低 – hvgotcodes

CSS垂直對齊，但並不完全

回答

相關問題