2014-02-14 161 views
0

我創建了一些塊,其中一個浮動左側,另一個浮動正確和相同的文本塊。文本垂直對齊不工作

example

現在我想要做的是垂直對齊的文本,但:

display: table-cell; vertical-align:middle; 

不工作,我不能使用的line-height(因爲它不是一個單一的線):

line-height: value of div; 

如果有人能在正確的方向指向我,將是巨大的。我創建了一個小提琴:

http://jsfiddle.net/hjHNL/

回答

1

嘗試是這樣的:

div#loading { 
padding-top:200px; 
position: absolute; 
top: 35%; 
left: 45%; 
margin-left: -(Y/2)px; 
margin-top: -(Y/2)px; 
z-index: 1; 
font-family:Arial,Helvetica,sans-serif; 
} 

您可以設置「填充頂」要麼像素或百分比,但要確保該位置是絕對的。這聽起來像你正在尋找的是爲了對齊的目的將圖片旁邊的文字向下移動。我在一個爲朋友設計的網站上使用了上述代碼。你可以看一下,結果在:

Showing alignment of divisions text and images inside a division.

我希望這有助於。

1

,你是它漂浮到右邊的垂直對齊不喜歡的表細胞的容器。把div放在一個容器中,然後漂浮那個容器。

1

我找到了最簡單的方法,新增的這對你的CSS類content_case_copy

.content_case_copy{ 
    width:160px; 
position: relative; /*this*/ 
    top: 50%; /*and this*/ 
vertical-align:middle; 

http://jsfiddle.net/hjHNL/3/

+0

你可以玩計算適合你的需求的頂部(css3):http://www.sitepoint.com/css3-calc-function/ – celerno