Question

所以我正在创建一个带引导程序的图像库，并希望在悬停在图像中心时显示文本。因此水平和垂直都定位了50％的图像（因此它具有响应性）。目前我只是想让文本正确地显示在图像上，但似乎有问题。

这是我正在使用的代码：`

 <div class="col-lg-3 col-md-4 col-xs-6 thumb text-center">
     <a class="thumbnail" href="#">
         <img class="img-responsive" src="images/girl.jpg" alt="">
         <h2> Text </h2>
     </a>
 </div>`

所以我尝试给div，a和img元素定位'relative'，然后给h2定位绝对，上下50％然而它似乎根本不居中它并且位于右下方附近图像的一角。

问题是我做错了什么跳出来给任何人？如果没有，我可以上传网络文件，并提供一个链接，以显示它是如何工作或实际上是否有更容易或替代方法来实现这一目标？

Answer 1

您需要的只是以下内容：

.thumbnail {
    display: block;
    position: relative;
}
.thumbnail h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.thumbnail将展开以包含图片，<h2>将在其中垂直和水平居中。

相对和绝对;响应中心定位？ bootstrap css

1 个答案: