基於百分比設計的縱向中心文字？

Question

所以我創建了各種手機屏幕的設計。我不是使用多個@media查詢，而是根據百分比創建一個設計，並且可以接受各種各樣的屏幕。

應該包括的一件事是投資組合「清單」。這是一個項目列表，每個項目都包含一個圖像（它應該自動調整到它所在的容器的大小）以及它旁邊的標題。

但是：它不應位於頂部，而應該以豎直爲中心。我已經嘗試了一些關於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; 
}