Question

尝试弄清楚如何在此演示中悬停图像时我可以垂直居中显示的文字：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;
}

问题是图像的大小可能不同，弹出的标题可能是多行。

想法？

Answer 1

在非TD元素上，垂直中心需要将行高设置为固定值。用 .work h2

替换 line-height: 269px; css的height属性

.work h2 {
    font: 36px/40px Helvetica;
    line-height: 269px;
    margin: 0;
    padding: 0;
}

显示图像悬停上的文本（垂直居中）

1 个答案: