快速CSS解决方案

Question

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

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

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

一种解决方案是在表格单元格中使用具有vertical-align的表格，但我不确定将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

PURE CSS WAY

不确定我理解你的要求。但我认为这可以达到你想要的效果，一种做法是将最上面的div用margin-top推到父div的中间，这将自动推动另一个它下面的div！

DEMO： http://jsfiddle.net/logintomyk/YTZYQ/

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

<强> CSS

#cycle-wrapper .divCent { width: 340px; height: 300px; text-align: center;

    margin-top:25% /* this is what i added **/

}

编辑

在Onimusha的评论之后，这是另一个小提琴，在他的链接上实现http://jsfiddle.net/logintomyk/7AJy5/1/

Answer 2

只有在计算了对齐后才能使<p>可见，因此没有“跳跃”段落。

Answer 3

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

在http://jsfiddle.net/m29uu/3/

上查看我的完美版本

#cycle-wrapper {
    width: 340px;
    height: 300px;
    border: 2px solid red;
    display:table;
}
#cycle-wrapper p {
    width: 340px;
    height: 150px;
    display:table-row;
}
#cycle-wrapper span {
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}

Answer 4

快速CSS解决方案

添加以下css

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

并在段落标记周围添加第二个div包装器，以便应用于新的css。它在小提琴上工作。

Answer 5

请参阅此链接http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

可以在没有jQuery循环元素的情况下垂直居中。但是当添加插件时，对齐不合适。我不是很了解这个插件，但尝试更改jQuery Cycle Plugin's option reference中提到的默认选项。

Answer 6

你的Div有id“循环包装”。以及该分区内的所有段落。

使用

               $("#cycle-wrapper").css("vertical-align:middle");


          you can apply any css like the following way

               $("element").css("propertyname","value");

设置多个属性和值：

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

如何让这些段落垂直对齐？

6 个答案:

快速CSS解决方案