Question

我仍然会去我的投资组合网站，并努力获得正确的细节。

我已经将9x9响应式缩略图图像工作，悬停时亮度发生变化，但是，现在我需要添加每个缩略图选择的标题。

我需要文本仅在悬停时显示，然后位于每个图像的中心（每个文本对缩略图都是唯一的，这就是为什么我的某些代码看起来不必要很长）。

这就是这个画廊的目标，但就目前而言，我真的只想弄清楚如何让文字移动到每个画廊图像的中心。

如果不这样做，我想我可以尝试将图像设置为每个div的背景，似乎更容易以这种方式对齐文本。

.thumb_title{
position: absolute;
color: #FFFFFF;
}

span{
text-align: center;
}

上面，我尝试使用绝对定位将文本从正常流中取出然后将其居中到div，尽管我非常确定我的CSS原则在这里是不正确的。

https://jsfiddle.net/205dmxdw/

Answer 1

应该这样做：

.imgContainer {
    position: relative;
    float: left;
    width: 33.3%;
    margin: 0px;
    text-align: center;
}

.thumb_title {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
}

响应式画廊缩略图与悬停的文本

1 个答案: