Question

整夜都在努力，不知道会这么辛苦。如果您只是想跳过那个问题，我的目标会在这个小提琴中用文字解释：http://jsfiddle.net/6VZeD/

基本上，我想要一个浮动的，固定大小的推荐框，包含两个元素a.part和.full，这两个元素都是垂直居中的，即使有多行也是如此。当.full溢出，导致滚动条时，我想滚动.full，而a.part保持垂直居中。我不能绝对定位a.part因为它需要垂直居中于任何尺寸。所以我将a.part包裹在一个绝对定位的元素中，但它与.full一起滚动。没有bueno。

为了简单起见，我把一些元素排除在小提琴之外，但是如果重要的话，我使用jQuery同位素定位固定大小的盒子，我正在扩展盒子（宽度，高度，顶边距，悬停时的左边距变化。所以我很高兴在.testimonial中添加div，但是我无法在.testimonial周围包装任何内容（尽管我可以添加类）。我开始探索涉及.hide（）和.offset（）的jQuery解决方案，但事情开始变得混乱，特别是因为我大量使用CSS转换。所以我希望尽可能避免使用Javascript。

这是小提琴HTML：

<div class="box praise testimonial">
    <div class="abs1">
        <a class="part" href="#">stay vertically centered!<br/>even if you scroll!</a>
    </div>
    <div class="abs2">
        <div class="full">
            <p>This text is larger than its containing box, and I want a scrollbar to appear. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nisl at justo sodales congue. Praesent sed arcu sit amet dolor molestie venenatis. Curabitur et consequat libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere lectus nec est viverra faucibus scelerisque massa fermentum. Donec ultricies bibendum tincidunt. Sed sit amet mi massa, a egestas arcu. Maecenas vitae libero metus. Proin dolor lorem, molestie ut ullamcorper sit amet, varius sit amet urna. Nunc aliquet scelerisque dui, et tristique quam molestie vitae. Etiam ac justo sapien. Etiam ipsum ante, porttitor posuere placerat id, congue quis neque. Nunc et elementum odio. Sed vulputate semper erat, a lobortis dolor porttitor ut.</p>
        </div>
    </div>
</div>
<div class="box praise testimonial">
    <div class="abs1">
        <a class="part" href="#">stay vertically centered!<br/>even if you scroll!</a>
    </div>
    <div class="abs2">
        <div class="full">
            <p>this<br/>should<br/>stay<br/>centered<br/>too!</p>
        </div>
    </div>
</div>

CSS：

body {
    color: #fff;
}
a { color: #fff; font-size: 18px; font-weight: bold; text-decoration: none; }
.box {
    display: inline-block;
    position: relative;
    float: left;
    overflow: hidden;
    margin: 20px;
    background: #777;
}
.testimonial, .testimonial .abs1, .testimonial .abs2, .testimonial a.part, .testimonial .full {
    height: 250px;
    width: 250px;
}
.testimonial:hover {
    overflow: auto !important;
}
.testimonial a.part {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}
.testimonial .abs1 {
    position: absolute;
    top: 0;
    left: 0;
}
.testimonial .abs2 {
    position: absolute;
    top: 0;
    left: 0;
}
.testimonial .full {
    display: table-cell;
    vertical-align: middle;
    opacity: 0.5
}

任何帮助都会赢得我不懈的赞赏。

Answer 1

尝试the solution in this fiddle，它还会在图像上居中多行文字。

滚动一个垂直居中的DIV，而不在另一个框中滚动另一个

1 个答案: