Html 图像库上的文本对齐

当我在每个缩略图上进行每次悬停时，有没有办法阻止每个缩略图逐渐向右推文本？您知道，因此对于每个缩略图，文本始终保持在相同的位置

因为目前它确实：

我希望所有图像的文本都保持在一个位置，而不是逐渐向右移动

代码如下：

HTML

当你说课文时，你指的是.text吗？我不确定我是否理解这个问题，但是，如果我理解了，你会不会给这个班一个绝对的位置来解决你的问题

我对你的小提琴做了些改动，让你知道你应该去做什么

.gallery_thumbnails {
    position: relative;
}

为了给任何东西一个绝对的定位，它需要在一个静态的或相对的元素里面

一旦你有了它，你可以给出

位置：绝对到你的.text类

希望有帮助，让我知道！同时，如果您正在学习css，那么了解position属性是最基本的。静态、相对和绝对定位一开始可能很棘手，但你会掌握窍门的；）
 你可以创建一个div，然后用jQuery在hover上填充它？我对这个很陌生，所以我不知道如何使用Javascript。是的，我指的是.text类。我可以试试你说的话，然后让你知道。这并不能解决问题，它仍然可以解决问题。像这样的问题应该以评论的形式提出，而不是回答。也许你可以做一个简单的提琴，这样人们可以自己试验；）@饥饿者也给出了一个可能的解决方案，只要记住这个位置：绝对；如果你想让它保持静止，这可能是最简单的方法！对不起，这个“问题”放错了地方，因为没有足够的代表，所以不允许我评论原来的帖子！
.gallery_thumbnails img {
 height: 60px;
 width: 106px;
 padding: 1px;
 position: relative;
 }

.gallery_thumbnails img:hover {
 border: 3px solid #a22b2f;
 cursor: pointer;
 }

.gallery_preview img {
 padding: 1px;
}

.imagebox {
 display: inline-block;
 vertical-align: top;
 }

.text {
 display: none;
 margin:-100px;
 margin-left:-150px;
 font-family:Arial, Helvetica, sans-serif; 
 font-size:16px;
 color:white;    
 } 

.gallery_thumbnails {
    position: relative;
}