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

mgdq6dx1 于 2022-11-19 发布在其他

关注(0)|答案(2)|浏览(131)

所以我创建了一个图像画廊与引导程序，并希望有文字显示在图像的中心悬停。所以，水平和垂直定位的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元素定位为“相对”，然后给h2定位为绝对、顶部和左侧50%，但它似乎根本没有居中，定位在图像的右下角附近。
问题是我做错了什么，跳出来的人？如果没有，我可以上传网络文件，并提供一个链接，以显示它是如何不工作，或者实际上有一个更容易或替代的方法来实现这一点？

css

来源：https://stackoverflow.com/questions/31144061/relative-and-absolute-responsive-center-positioning-bootstrap-css

2条答案

按热度按时间

t3psigkw1#

您应该只需要以下内容：

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

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

赞(0）回复(0）举报 2022-11-19

umuewwlo2#

您可以在.position-relative元素内使用引导类position-absolute top-50 start-50 translate-middle。
第一个
相关：引导程序文档-中心元素

赞(0）回复(0）举报 2022-11-19