圖像上的垂直居中多行文本

我試圖讓一些標題文本垂直放置在圖像中間。我已經嘗試了一大堆不同的技術，使用table-cells和什麼不是，但似乎無法使它工作！圖像上的垂直居中多行文本

我有一個嵌套的<a>和嵌套<img> & div.caption-wrapper的一個<li>。我大小標題包裝成爲大小爲<img>相同，但似乎無法得到div.caption-wrapper在<img>

很顯然，我需要獲得基礎之上將自己定位，但在哪裏here is a fiddle我我在。有人可能提出解決方案的任何機會？

2016-02-13 oldo.nicho

隨着顯示錶：https：//jsfiddle.net/1agdkamu/，與translateY：https：//jsfiddle.net/1agdkamu/1/ – powerbuoy

創建一個fiddle.

以下CSS添加到.caption-wrapper：

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

此外，從.caption-wrapper刪除height: 100%和width: 100%屬性。

來源

2016-02-13 11:26:12

我認爲translateY是最好的解決方案，因爲您不需要知道img的尺寸。這是一個更新和清理小提琴，顯示如何：https://jsfiddle.net/1agdkamu/1/ – powerbuoy

非常好！謝謝塔倫。呼氣鬆了一口氣，高興再次前進...... :-) –

樂意幫忙！ :) –

這是一個選項與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>

來源

2016-02-13 11:23:31

感謝您的建議。我想我會與塔倫的建議，因爲我想最大限度地提高瀏覽器兼容性，並從我瞭解IE8/9不支持flexbox。我對flexbox很感興趣，所以我可能會更多地閱讀它。再次感謝。 –

當然，不客氣。 –

圖像上的垂直居中多行文本

回答

相關問題