Question

我对bootstrap 3的缩略图有一些问题。您可以在此处查看代码：http://amazing-vt.de/#portfolio

当您悬停图像时，您可以看到此图像背后的文字。现在我想将此文本居中，但填充不会影响任何这些链接。此外，我已使用类缩略图为<a>设置了高度。我如何更改我的CSS，所以我不需要设置高度？如何让文本居中？任何人都可以解释一下，为什么图像在悬停时会闪烁？

Answer 1

after removing <code>padding:0px !important</code> you will get like this

Stylesheet.css行：326删除padding:0px !important，然后尝试任何可能的更改

同时删除padding-top:25% 和 Bootstrap.css 4585

padding:0px
margin-bottom:16px;

您的设计将如您所愿。我已经测试了

Answer 2

我建议你尝试使用尽可能多的引导类，例如.img-responsive使图像缩放到其容器的宽度。

创建您自己的.thumb元素，其中包含图片的.thumb__image和覆盖文字的.thumb__text。 .thumb_image包含图片并使用正常定位，.thumb__text具有position: absolute，所有坐标都设置为零，以使其成为图像。

.thumb__text内部有一个thumb__text-inner，它使用css-tricks.com/centering-css-complete-guide/中的垂直居中技术来对文本进行居中。

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

请参阅下面的示例。我添加了-15px的负余量来抵消可能不需要的Bootstraps网格装订线。

＆＃13;

.thumb {
  position: relative;
  margin: 0 -15px; // offsetting the grid
}

.thumb__text {
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(39, 174, 96, .5);
  color: #fff;
}

.thumb__text-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.thumb:hover .thumb__text {
  z-index: 1;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
      <div class="col-sm-4">
        <div class="thumb">
          <img src="http://placekitten.com/800/400" class="img-responsive thumb__image" />
          <div class="thumb__text">
            <div class="thumb__text-inner">
              Omg! What a lovely kitten that is!
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumb">
          <img src="http://placekitten.com/g/800/400" class="img-responsive thumb__image" />
          <div class="thumb__text">
            <div class="thumb__text-inner">
              Omg! What a lovely kitten that is!
            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>
</div>

＆＃13;

CSS：bootstrap 3缩略图后面的文本

2 个答案: