垂直对齐<span>或<div> </div> </span>

时间:2011-02-07 16:02:02

标签: jquery css animation vertical-alignment

我需要将一些文字集中在<div><span>标记内 我设置了display:table-cell。这很有用。
但我想动画它(使用jQuery)。但这不起作用,因为显示设置回display:block。我不希望这样,因为它没有正确显示。

有没有人知道这样做的方法?

(如果您需要我使用的代码,请告诉我。)

<div id="container">
<ul>
<li id="1">
    <span id="spanimg1">Lorem Ipsum</span>
    <img id="img1" src="1.jpg" />        
</li>
<li id="2">
    <span id="spanimg2">Lorem Ipsum</span>
    <img id="img2" src="2.jpg"/>        
</li>
<li id="3">
    <span id="spanimg3">Lorem Ipsum</span>
    <img id="img3" src="3.jpg"/>        
</li>
</ul>
</div>

<style>
#container {
width: 400px;
height: 400px;
position:relative;
margin: auto;
vertical-align:middle;
}

li {
margin: 0;
padding: 0;
}

ul {
margin: 0;
padding: 0;
list-style-type:none;
}
li span {
position:relative;
background:black;
width:400px;
height:80px;
text-align:center;
color:white;
display:none;
z-index:1000;
vertical-align:middle;
}
img {
position:absolute;
display:none;
}
.showimg {
display:block;
}
.show {
display:table-cell;
vertical-align:middle;
position:absolute;
}
</style>

2 个答案:

答案 0 :(得分:1)

升级到jQuery 1.4.3或更高版本得到动画中table-cell显示的支持。

答案 1 :(得分:0)

编辑:我现在可以看到您发布了具有固定高度的代码。只需将其添加到“li span”标记中,它应该垂直居中所有文本。

line-height: 80px;