0

このデモで画像をホバーしたときに表示されるテキストを垂直方向に中央揃えする方法を見つけようとしています: http://jsfiddle.net/XCNKj/

HTML

<div class="main">       
  <article class="work" id="project-1">
    <img src="http://lorempixel.com/output/sports-q-g-430-269-5.jpg">
    <div class="covering background"></div>
    <div class="covering foreground">
        <h2>Project 1</h2>
    </div>
  </article>  
  <article class="work" id="project-2">
    <img src="http://lorempixel.com/output/nightlife-q-g-430-269-2.jpg">
    <div class="covering background"></div>
    <div class="covering foreground">
        <h2>Project 2</h2>
    </div>
  </article>   
</div>

CSS

.work {
    width: 430px;
    height: 269px;
    margin-left: 30px;
    margin-bottom: 30px;

    display: inline-table;
    position: relative;
}

.covering {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    filter:alpha(opacity=0);
}

.work:hover .covering {
    opacity: 1;
    filter:alpha(opacity=100);
    cursor: pointer;
}

.background {
    width: 100%; height: 100%;
    background: white;
}

.foreground {
    bottom: 0; right: 0;
    margin: auto;
    text-align: center;
}

.work h2 {
    font: 36px/40px Helvetica;
    height:100%;
    margin: 0;
    padding: 0;
}

問題は、画像のサイズが異なり、ポップアップするキャプションが複数行になる可能性があることです。

アイデア？

4

1 に答える 1

0

非 TD 要素では、垂直方向の中央に line-height を固定値に設定する必要があります。.work h2CSSの高さ属性を次のように置き換えます。line-height: 269px;

.work h2 {
    font: 36px/40px Helvetica;
    line-height: 269px;
    margin: 0;
    padding: 0;
}
于 2013-02-24T20:21:24.303 に答える