Javascript 如何使这些段落垂直对齐？

我习惯于在几张幻灯片之间淡出。这些幻灯片的高度是固定的，但它们包含包含不同长度文本的p标记。我创造出来是为了让你明白我的意思

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

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

一种解决方案是在表格单元格中使用垂直对齐的表格，但我不确定在td中放置p标记在语义上是否正确（如果我错了，请有人纠正我）。这里是否有一种纯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>

剧本：

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

谢谢

EDIT:我已经将其用于表格，但如果可能的话，我希望找到一个纯css的解决方案！

您的Div具有id“cycle wrapper”。以及该Div中的所有段落

使用

设置多个属性和值：

                 $(selector).css({property:value, property:value, ...})

您的Div具有id“cycle wrapper”。以及该Div中的所有段落

使用

设置多个属性和值：

                 $(selector).css({property:value, property:value, ...})

---

纯CSS方式

不确定我是否理解您的要求。但我认为这达到了您的要求，
一种方法是使用

边距顶部将最上面的
div
推到父div的中间，这将自动推到它下面的另一个div！


演示：


HTML

<div class="divCent">
        <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>
</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 

编辑

在Onimusha的评论之后，这里是另一个提琴，在他的链接上实现
纯CSS方式

不确定我是否理解您的要求。但我认为这达到了您的要求，
一种方法是使用
边距顶部将最上面的
div
推到父div的中间，这将自动推到它下面的另一个div！


演示：


HTML

<div class="divCent">
        <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>
</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 

编辑

在Onimusha的评论之后，这里是另一个提琴，在他的链接上实现
你可以使你的
仅在对齐计算后可见，因此没有“跳跃”段落。
你可以使你的
仅在对齐计算后可见，因此没有“跳跃”段落。
如果您不介意使用css显示属性并添加分隔元素

检查我的完美版本

如果您不介意使用css显示属性并添加分隔元素

检查我的完美版本

快速CSS解决方案
添加以下css

#cycle-wrapper div > div {
    display: table-cell;
    vertical-align: middle;
}

并在段落标记周围添加第二个div包装器，以应用新css。它在小提琴上起作用。
快速css解决方案
添加以下css

#cycle-wrapper div > div {
    display: table-cell;
    vertical-align: middle;
}

并在段落标记周围添加第二个div包装器，以应用新css。它在小提琴上起作用。
请参见此链接

可以在没有jQuery循环元素的情况下垂直居中。
但是当插件被添加时，对齐是不正确的。
我不太了解这个插件，但请尝试更改中提到的默认选项。
查看此链接

可以在没有jQuery循环元素的情况下垂直居中。
但是当插件被添加时，对齐是不正确的。
我不太了解这个插件，但尝试更改中提到的默认选项。
但如果可能的话，我很想找到一个纯css解决方案
这不是纯css，也不能解决问题，然后你可以使用css#循环包装器{垂直对齐：文本顶部；}
但如果可能的话，我很想找到一个纯css的解决方案
这不是纯css也不能解决问题那么你可以使用css#cycle wrapper{vertical align:text top；}@Onimusha:我刚刚发布了如何垂直居中div，用户可以根据自己的需要放置大约边距…而且，我的小提琴没有执行任何JS！：）我知道，但运行JS很重要，因为这会导致它无法垂直对齐。JS给出了
顶部
和
左侧
：）@Onimusha:给你：，修改了css，在我看来非常好……你的意见呢它仍然在Chrome的顶部对齐。我开始认为它很简单，但正如我所说，jquery cycle（）覆盖了大部分css。硬汉this@Onimusha：我刚刚发布了如何将div垂直居中，用户可以根据自己的需要放置大约边距…而且，我的小提琴没有执行任何JS:）我知道，但运行JS很重要，因为这会导致它无法垂直对齐。JS给出了
顶部
和
左侧
：）@Onimusha:给你：，修改了css，在我看来非常好……你的意见呢它仍然在Chrome的顶部对齐。我开始认为它很简单，但正如我所说，jquery cycle（）覆盖了大部分css。这很难，但我认为p必须是可见的，然后才能计算对齐。你是对的，我没有想到，显然你需要
的高度，所以它必须是可见的。但是如果你使用
可见性：隐藏
而不是
显示：无
，你应该能够用JS获得段落的高度，因为元素仍然占据页面e上的空间
#cycle-wrapper div > div {
    display: table-cell;
    vertical-align: middle;
}