javascript - 我怎样才能让这些段落垂直对齐？

Question

我正在使用 jquery cycle在几张幻灯片之间淡出。这些幻灯片的高度是固定的，但它们包含 p 标签，其中包含不同长度的文本。我创建了 this jsfiddle向您展示我的意思。

我遇到的问题是我希望这些幻灯片中的 p 标签垂直对齐 - 我希望副本恰好位于 div 的中心。通常在处理这样的动态内容时，我会将 p 标签放在包装器中，然后使用 js 计算包装器在页面加载时的高度和相应的位置(这就是为什么我将其标记为 javascript - 我可能需要如果我不能使用 css，请将其用于解决方案)。

无论如何，我似乎无法使用 js 的原因是因为 p 标签位于隐藏面板中。我只能在父元素可见后才能访问元素的大小，这意味着毫无疑问，我必须在幻灯片可见后立即设置回调以进行定位。缺点是当 js 计算位置时内容会跳跃。

一种解决方案是在表格单元格中使用垂直对齐的表格，但我不确定将 p 标签放在 td 中在语义上是否正确？ (如果我错了，请有人纠正我)。有没有我可以在这里使用的纯 css 解决方案，它也适用于 ie7？

这是我的 html:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.js"></script>
<div id="cycle-wrapper">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper.</p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
    </div>
</div>

CSS:

#cycle-wrapper { width: 340px; height: 300px; border: 2px solid red; }
#cycle-wrapper div { width: 340px; height: 300px; text-align: center; }

脚本:

$(function() {
    $('#cycle-wrapper').cycle(); 
});

谢谢

编辑:我已经让它与表格一起工作了 here但如果可能的话，我很乐意找到一个纯 css 解决方案!

Answer 1

你可以让你的<p>仅在计算对齐后可见，因此没有“跳跃”段落。