Как выравнивать текст по вертикали над фоновым изображением?

Question

Я пытаюсь наложить текст с белым полупрозрачным фоном на изображение, когда люди мыши над этим изображением. Здесь я нашел ответы, содержащие оригинальный тип следующего кода. Теперь я хочу вертикально выровнять текст до середины изображения.

Возможно ли это?

HTML:

<div class="image"> 
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" /> 
</div> 

CSS:

.image { 
    position:relative; 
    width:400px; 
    height:400px; 
} 
.image img { 
    width:100%; 
    vertical-align:top; 
} 
.image:after { 
    content: 'Hello'; 
    color: #000000; 
    vertical-align: middle; 
    text-align: center; 
    position: absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    background: rgba(255,255,255,0.7); 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 
.image:hover:after { 
    opacity:1; 
} 

Answer 1

Если высота изображения (или контейнера) вы используете фиксирована, как в вашем примере, то вы можете использовать метод line-height , следующие за код в вашем примере:

.image:after { 
    line-height: 400px; 
} 

Добавить эту строку в .image:after, и он достигнет того, чего вы хотите.

JSFiddle Example

Answer 2

Это уверенное и структурировано, чтобы очистить пространство.

.image:after { 
    line-height: 400px; 
    margin: 0; 
    padding: 0; 
}