0

整晚都在做这个，没想到会这么难。我的目标在这个小提琴中用文字解释，如果你只想跳到那个：http: //jsfiddle.net/6VZeD/

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

为简单起见，我在小提琴中留下了一些元素，但如果它很重要，我使用 jQuery isotope 来定位固定大小的框，并且我正在扩展框（宽度、高度、上边距和左边 -边距变化）悬停。所以我很高兴在 中添加 div .testimonial，但我无法包装任何东西.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
}

任何帮助都会赢得我永恒的赞赏。

4

1 回答 1

1

试试这个小提琴中的解决方案，它还将多行文本集中在图像上。

于 2012-09-05T18:48:58.417 回答