在响应式布局中居中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; 
}