相对和绝对响应中心定位？引导CSS

迈克·杨

因此，我正在使用引导程序创建图像库，并希望将鼠标悬停在图像的中心显示文本。因此，水平和垂直放置图像的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％，但是它似乎根本没有居中，并位于图片。

问题是我做错什么了吗？如果没有，我可以上传Web文件并提供一个链接来显示它如何不起作用，或者实际上是否有更简单或替代的方法来实现此目的？

雅各布

您需要做的只是以下几点：

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

.thumbnail将拉伸以包含图像，并且图像<h2>将在其中垂直和水平居中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。