文字垂直對齊不起作用

Question

我正在創建一些塊，其中一個塊向左浮動，另一個塊向右浮動，並且與文本塊相同。

現在，我要垂直對齊文本，但是：

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

不起作用，我不能使用line-height（因為它不是單行）：

line-height: value of div; 

如果有人可以指出正確的方向，那就太好了。 我創建了一個小提琴：

http://jsfiddle.net/hjHNL/

Answer 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;
}

您可以將“ padding-top”設置為px或％，但請確保該位置是絕對的。 聽起來您正在尋找的是將圖片旁邊的文本向下移動以便對齊。 我在為朋友設計的網站中使用了上面的代碼。 您可以在以下位置查看結果：

顯示分區內文本和圖像的對齊方式。

我希望這有幫助。

Answer 2

您需要一個具有

display:table

里面有一個表格單元

http://jsfiddle.net/hjHNL/2/

Answer 3

垂直對齊方式不喜歡您將其向右浮動。 將div放在一個容器中，然后將該容器浮動。

Answer 4

我發現的最簡單的方法是將其添加到CSS類content_case_copy

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

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