Вертикальный текст центра на основе процентного содержания?

Question

Так что я создаю дизайн для всех видов экранов телефонов. Вместо использования нескольких запросов @media im создает дизайн, основанный на процентах и ​​приемлемый для всех вариантов экранов.

Одной из вещей, которые должны быть включены, является «список» портфеля. Это список элементов, каждый из которых содержит изображение (которое должно автоматически настраиваться на размер контейнера, в котором оно находится), и заголовок рядом с ним.

Однако: вместо того, чтобы позиционировать вверху, он должен быть вертикально центрирован. Я пробовал несколько предложений по Stackoverflow и другим сайтам. Но не мог заставить что-то работать.

Пожалуйста, проверьте this JSfiddle

Я не мог заставить вещи работать, такие как

div { 
width: 250px; 
height: 100px; 
line-height: 100px; 
text-align: center; 
} 

span { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal;  
} 

Так я надеюсь, что кто-то знает раствор. Просто имейте в виду: это должен быть процент, потому что все остальное тоже.

Спасибо!

Answer 1

Возможно, вы ищете что-то вроде этого: JSFiddle?

Добавляя

position:relative 

к контейнеру я был тогда в состоянии определить индивидуальное позиционирование для дочерних элементов, которые затем позволили мне центрировать текст ответно. Пожалуйста, дайте мне знать, если это не то, что вы искали.

.port_nav { 
    background-color:rgba(255,255,255,0.3); 
    width:80%; 
    margin: 88px auto 0 auto; 
    height:80%; 
    position: relative; 
} 

И отдельные изображения (добавляется промежуток, чтобы сделать выбор менее проблематично):

.port_nav .item .image { 
    position: relative; 
    width:30%; 
    float:left; 
    height:100%; 
    background-color:rgba(255,255,255,0.3); 
} 

.port_nav .item .image span { 
    position: absolute; 
    width: 100%; 
    text-align:center; 
}