2014-02-14 164 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