Question

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

在过去，我经常通过黑客攻击来达到这个效果，但是知道最好和最有效/语义的方法（CSS？jQuery？Both？）

如果您查看设计目标网页并将鼠标悬停在图片上，您就会明白这一点。请注意，这些图像没有固定的高度。

任何实现都会非常感激（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

对于这种特殊情况，设计使用的解决方案是此博客文章中的方法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>

将鼠标悬停在图片上即可显示文字（垂直居中）

2 个答案: