在響應式佈局中居中WordPress的帖子標題

Question

我正在嘗試創建一個顯示我的設計項目圖片的組合頁面，每個圖片都是關於該項目的頁面的鏈接。

該頁面是一個兩列響應佈局。懸停時，項目的標題顯示在圖像的頂部。

我的問題是，爲了讓項目的標題出現在圖像上，我必須絕對定位它。這意味着現在我無法將其置於框架中央。任何想法，我可以做到這一點？我可以給它一個百分比，但它會改變它的大小調整後位置...

這是我的代碼：

<div class="img"> 
    <a title="<?=$title?>" href="<?=$site[0]?>"> 
    <?php the_post_thumbnail(); ?> 
    </a> 
<span class="itemTitle"><?php the_title(); ?></span> 
</div> 

這是我的CSS：

.img { 
    position: relative; 
} 

.img span { 
    visibility: hidden; 
    pointer-events: none; 
} 

.img:hover span { 
    visibility: visible; 
    transition: 0.1s; 
    -webkit-transition: 0.1s; 
} 

.itemTitle { 
    position: absolute; 
    top: 42%; 
    text-transform: uppercase; 
    font-size:40px; 
    font-family: 'Verlag A', 'Verlag B'; font-weight: 800; font-style: normal; 
    text-align: center; 
} 

這是一個鏈接頁面我的工作： http://www.fredericdesign.net/newsite/work/

Answer 1

這樣做：

.itemTitle { 
    font-family: 'Verlag A','Verlag B'; 
    font-size: 40px; 
    font-style: normal; 
    font-weight: 800; 
    position: absolute; 
    text-transform: uppercase; 
    top: 42%; 
    /*new*/ 
    right: 0; 
    left: 0; 
    text-align: center; 
}