將鼠標懸停在圖像上以顯示文本（垂直居中）

Question

這看起來像是一個標準問題，但我在這裏經過了一些「最佳實踐」。在網頁周圍（一個很好的例子是designspiration.net），你有擁有圖像的網站，當它懸停時，顯示一個塊/ alpha顏色，其中包含水平和垂直方向的文本（通常是標題，標題或編號）。

在過去，我平時一直攻擊我一路走過來達到這種效果，但它會是巨大的，知道最好的和最有效的/語義的方式來做到這一點（CSS？jQuery的？兩個？）

如果您查看設計目標着陸頁並將鼠標懸停在圖像上，您就會明白。請注意，這些圖像沒有固定的高度。

任何實現將非常感激（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>