将鼠标悬停在图像上以显示文本（垂直居中）

Question

这似乎是一个标准问题，但我在这里寻求一些“最佳实践”。在网络周围（一个很好的例子是 designspiration.net），您的网站有图像，当悬停时，显示块/alpha 颜色，文本（通常是标题、标题或数字）位于水平和垂直中心。

在过去，我通常会通过破解来实现这种效果，但如果知道最好和最有效/最语义化的方式来做到这一点（CSS？jQuery？两者？）

如果您查看 designspiration 登录页面并将鼠标悬停在图片上，您就会明白这一点。请注意，这些图片没有固定高度。

非常感谢任何实现（jsFiddle 等），希望这对其他人有所帮助。

非常感谢 理查德

Answer 1

使用vertical-allign: middle;！ http://jsfiddle.net/zR4kk/

你只需要制作你的容器display:table 还有你的内容display: table-cell

HTML

<div class="area">
     <p>To look best, text should really be centered inside this div both vertically and horizontally.</p>
</div>​

CSS

.area { 
  width: 300px; 
  height: 300px; 
  background: green; 
  display:table;
    padding:5px;
}

.area p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}​

Answer 2

对于这种特殊情况，designspiration 使用的解决方案是这篇博文中的方法 4：Vertical Centering with CSS。

<style>
    .container {
        position: relative; /* or absolute, if needed */
    }

    .covering {
        position: absolute;
        top: 0; left: 0;
        opacity: 0;
        -webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        -o-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out;
    }
    .container:hover .covering {
        opacity: 0.9;
    }

    .background {
        width: 100%; height: 100%;
        background: white;
    }
    .foreground {
        height: 30px;
        bottom: 0; right: 0;
        margin: auto;
        text-align: center;
    }
</style>

<!-- floated so that it fits the image; position: absolute would also work -->
<div class="container" style="float: left">
    <img src="(source image)" />
    <div class="covering background"></div>
    <div class="covering foreground">
        This will be centered
    </div>
</div>