垂直对齐或

发布于 2024-10-16 04:04:03 字数 1271 浏览 7 评论 0原文

我需要将一些文本置于

或标记内。
我已经设置了 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>

原文

I need to center some text inside a <div> or <span> tag.
I've set the display:table-cell. That worked.
But I want to animate it (using jQuery). But this doesn't work because the display is set back to display:block. I don't want that, because that's not displaying properly.

Does anyone know a way to do it?

(Tell me if you need the code I used.)

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ˉ厌 2024-10-23 04:04:03

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

回复收藏 0 原文

余生一个溪 2024-10-23 04:04:03

编辑：我现在可以看到您发布的代码表明您有固定的高度。只需将其添加到“li span”标签中，它就会将所有文本垂直居中。

line-height: 80px;

EDITED: I can see now that you posted your code that you have fixed heights. Just add this to your "li span" tag and it should center all text vertically.