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