Вертикальный центр многострочного текста над изображением

Question

Я пытаюсь получить текст подписи, который будет вертикально расположен посередине изображения. Я пробовал целую кучу разных методов, используя table-cells, и что-нет, но, похоже, не может заставить его работать!

Я имею в <li> с вложенной <a> и вложенной <img> & div.caption-wrapper. Я размером с титрами обертку, чтобы иметь тот же размер, как <img>, но не могу показаться, чтобы получить div.caption-wrapper позиционировать себя над <img>

Очевидно, мне нужно, чтобы получить на вершине основы, но here is a fiddle, где я 'м в. Кто-нибудь может предложить решение?

Answer 1

Создано fiddle.

Добавьте следующий CSS к .caption-wrapper:

top: 50%; 
transform: translateY(-50%); 
-webkit-transorm: translateY(-50%); /* for Chrome */ 
position: absolute; 
left: 0; 
display: inline-block; 

Также удалите height: 100% и width: 100% объектов недвижимости от .caption-wrapper.

Answer 2

Это один вариант с position: absolute и Flexbox

ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

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

 
.caption-wrapper { 
 
    position: absolute; 
 
    background: rgba(255, 255, 255, 0.6); 
 
    display: flex; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 35px; 
 
    text-align: center; 
 
}

<ul id="og-grid" class="og-grid"> 
 
    <li class="grid-item"> 
 
    <a href="#"> 
 
     <img src="http://oldo-nicho.com/img/services/2.jpg" alt="img01"/> 
 
     <div class="caption-wrapper"> 
 
     <span class="grid-caption">Caption text! Caption! Caption!</span> 
 
     </div> 
 
    </a> 
 
    </li> 
 
</ul>