0

これに一晩中取り組んできましたが、それがそれほど難しいとは思いもしませんでした。私の目標は、このフィドル内の言葉で説明されています。スキップしたい場合は、http：//jsfiddle.net/6VZeD/

基本的には、フロートされた固定サイズの紹介文ボックスに2つの要素が含まれている必要があります。これらの要素は、a.part複数.fullの行がある場合でも、両方とも垂直方向に中央に配置されます。オーバーフローしてスクロールバーが発生した場合、垂直方向の中央に配置したまま.fullスクロール.fullしたいと思います。どのサイズでも垂直方向に中央に配置する必要があるため、a.part絶対に配置することはできません。a.part絶対に配置された要素でラップa.partしましたが、それは。と一緒にスクロールし.fullます。ブエノはありません。

簡単にするためにいくつかの要素をフィドルから除外しましたが、重要な場合は、jQueryアイソトープを使用して固定サイズのボックスを配置し、ボックスを拡張しています（幅、高さ、上マージン、および左-ホバー時にマージン変更）。ですから、内に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 に答える