Html CSS：引导3缩略图后面的文本

我对Bootstrap3中的缩略图有一些问题。您可以在此处看到代码：

---

将图像悬停时，可以看到该图像后面的文本。现在我想将此文本居中，但填充不会影响任何这些链接。此外，我还使用类缩略图设置了

的高度。我必须如何更改css，以便不需要设置高度？如何使文本居中？谁能解释一下，为什么图像在悬停时闪烁？

填充：0px！重要信息您会得到这样的结果“>

Stylesheet.css行：326删除

填充：0px！重要
然后尝试任何可能的更改

同时从同一位置移除
填充顶部：25%
及
Bootstrap.css 4585

padding:0px
margin-bottom:16px;

您的设计将如您所期望的那样。我已经测试了
我建议您尝试使用尽可能多的引导类，例如
。img responsive
将图像缩放到其容器的宽度

创建您自己的
.thumb
元素，该元素包含图像的
.thumb\uu图像
，覆盖文本的
.thumb\uu文本
。
.thumb\u图像
包含图像并使用正常定位，
.thumb\uu文本
具有
位置：绝对
，所有坐标均设置为零，以使其成为形象

在
.thumb\uu text
中有一个
thumb\uu text-inner
，它使用css-tricks.com/centering-css-complete-guide/中的垂直居中技术来居中文本

确保所有图像具有相同的纵横比，并且文本适合图像的尺寸

请参见下面的示例。我添加了一个负边距
-15px
，以抵消可能不需要的引导


.thumb{
位置：相对位置；
边距：0-15px；//偏移网格
}
.thumb\u文本{
z指数：-1；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景色：rgba（3917496.5）；
颜色：#fff；
}
.thumb_uu文本-内部{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.thumb：悬停。thumb\u文本{
z指数：1；
}

天哪！多么可爱的小猫啊！
天哪！多么可爱的小猫啊！
查看公文包图像，下面的文本已经居中-在Firefox 34.stylesheet.css行：326删除填充：0px！重要信息，然后尽可能尝试changes@VipulHadiya移除填充物0px不是很好。现在我在图像周围有一个绿色边框。@Martin我还想垂直居中。现在我只居中了水平。但你无论如何都可以管理边界。你当前的HTML不太好。李的高度是467px，而实际高度非常小。也许小提琴可以帮助DummerTroll？我知道你已经做到了，但我不容易看到如何做到。但是，这不是我的代码…我已经按照你说的更改了代码。现在我的锚标记上仍然有一个固定的高度。我怎么能我替换了这个？而且我的文本不是垂直居中的。你为什么不使用这个CSS呢？@Hamza在元素中使用文本中心类，因为他希望标签中的文本在垂直居中，并且有很多操作系统样式阻止使用垂直居中对齐。我没有在我的示例中添加lightbox，只有关于缩略图和覆盖文本的部分。Try将我的示例与您已有的代码集成。接下来，我注意到一个图像（带吉他的家伙）具有不同的纵横比（纵向而非横向）。这看起来不太好。一个选项是将屏幕拆分为三列，并将多个图像放在每列中垂直堆叠。