css - 使用 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: middle;