垂直對齊與CSS的圖像文字

Question

我想讓圖像褪色，然後文字出現在圖像中心居中（水平和垂直），但我不能讓它垂直居中。

這裏是我的CSS：

<style type="text/css"> 
a img { 
border: 0px; 
opacity: 1; 
filter: alpha(opacity=100); 
-o-transition: opacity 1.5s linear; 
-webkit-transition: opacity 1.5s linear; 
-moz-transition: opacity 1.5s linear;} 

a:hover img { 
/*60 80*/ 
opacity: .40; 
filter: alpha(opacity=50); 
-o-transition: opacity .1s linear; 
-webkit-transition: opacity .1s linear; 
-moz-transition: opacity 1.5s linear;} 

#wrapper .text { 
visibility:hidden 
} 

#wrapper:hover .text { 
position: absolute; 
visibility:visible; 
opacity: .60; 
color:white; 
font-size:24px; 
font-weight:bold; 
text-align:center; 
width: 100% 
} 

</style> 

這裏的HTML部分（它是的tumblr）：

<div id="wrapper">{LinkOpenTag}<a href="{reblogurl}"><img src="{PhotoURL-400}" alt="  {PhotoAlt}" />{LinkCloseTag}<p class="text">REBLOG</p></div></a> 

Answer 1

HTML：

<div id="wrapper"> 
    <a href="{reblogurl}"> 
     <img src="{PhotoURL-400}" alt="{PhotoAlt}" /> 
     <p class="text">REBLOG</p> 
    </a> 
</div> 

CSS：

a 
{ 
    display: inline-block; 
    position: relative; 
} 

a img 
{ 
    height: 200px; // demo prop 
    widht: 150px; // demo prop 

    border: 0px; 
    opacity: 1; 
    filter: alpha(opacity=100); 
    -o-transition: opacity 1.5s linear; 
    -webkit-transition: opacity 1.5s linear; 
    -moz-transition: opacity 1.5s linear; 
} 

a:hover img 
{ 
    /*60 80*/ 
    opacity: .40; 
    filter: alpha(opacity=50); 
    -o-transition: opacity .1s linear; 
    -webkit-transition: opacity .1s linear; 
    -moz-transition: opacity 1.5s linear; 
} 

a .text 
{ 
    opacity: .60; 
    position: absolute; 
    font-size:24px; 
    font-weight:bold; 
    text-align:center; 
    color: red; 
    display: none; 
    padding: 0; 
    margin: 0; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); /* IE 9 */ 
    -webkit-transform: translate(-50%,-50%); /* Safari and Chrome */ 
} 

a:hover .text 
{ 
    display: block; 
} 

演示：要直裏面中心格或文本http://jsfiddle.net/jo_asakura/BfRpp/

Answer 2

嘗試使用vertical-align屬性。

vertical-align: middle;