滾動一個垂直居中的DIV而沒有在同一個框中滾動另一個

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它也將多行文本居中放在圖像上。