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

Question

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

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

Answer 1

我建议您尽可能多地使用引导类，例如.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 网格排水沟。

.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;
}

<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>

Answer 2

Stylesheet.css line : 326 Remove padding:0px !important 然后尝试任何可能的更改

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

padding:0px
margin-bottom:16px;

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