html - Css 布局 Bootstrap 覆盖

Question

我知道有一个类似的问题，但我已经尝试了所有但都失败了。 在此示例中，有 4 行，每行包含一个图像和一个链接。

我希望每个链接覆盖每个图像，但它似乎总是以整个宽度为相对。

IE "Mann" 中的链接实际上是针对 "Badetuch" 的。

我只想设置 css，使每个测试类都位于每个图像的水平中心。

单独设置它们并不理想，对于 col-2 .test，我将其设置为 30%，应该是 50%，但绝对基于 col2 中的图像。

我正在使用 bootstrap 的 View 模块来创建网站。

希望这是有道理的。我们将不胜感激任何帮助。 塔

Answer 1

这就是你要做的。

.view-content > .row > div {
  position: relative;
  margin: 0;
  padding: 0;
  border: 1px solid black;
  box-sizing: border-box;
}

.overlay {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  margin-top: -1em;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="region region-content">
  <section id="block-system-main" class="block block-system clearfix">
    <div class="view view-produkte view-id-produkte view-display-id-page view-dom-id-WhyDidYouDoThisClassMakeThatNumberAnIDInstead">
      <div class="view-content">
        <div class="row">
          <div class="col-xs-3">
            <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive">
            <a href="#" class="overlay">Link 1</a>
          </div>
          <div class="col-xs-3">
            <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive">
            <a href="#" class="overlay">Link 2</a>
          </div>
          <div class="col-xs-3">
            <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive">
            <a href="#" class="overlay">Link 3</a>
          </div>
          <div class="col-xs-3">
            <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive">
            <a href="#" class="overlay">Link 4</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

首先，您通过编写“col-xs-3”创建一个“3 列”(除非另有说明，xs 屏幕尺寸的设置将传递给更大的尺寸)。 我将父 div 的边距和填充设置为 0，因为在示例中您的框之间没有任何空间。我还给了他们一个边框来区分不同的图像，并给了他们一个边框大小的边框，这样他们就可以正确地适应他们的列。

因此，为了使链接在 div 内水平居中(这是关键 - 它与图像在同一列 div 内)，我将宽度设置为 100%，即父级的 100%(“col-xs-3") 然后给它一个居中的文本对齐。 anchor 标签默认是行内元素；它们仅与包含的文本要求的宽度一样宽，因此设置 text-align: center 而不设置 width: 100% 什么都不做，因为您实际上是在文本占据的宽度中居中，因此没有可见效果.设置 width: 100% 使其占据父 div 的整个宽度，从而为其提供居中空间。

现在，为了让它在图像顶部垂直居中，我给它定位:绝对。这可以防止它移出图像。具有 position: absolute 的元素会执行它被告知要做的任何事情，相对于它遇到的具有非静态位置值的第一个父元素。 (这就是为什么我将父 div 的内容设置为 relative 但没有给它一个 top 或 left 值来移动它。)在我将它设置为 position: absolute 之后，我必须告诉它相对于那个父 div 去哪里，我想让它走到中间。图像是父级包含的最大元素，因此父级的高度和宽度等于图像的高度和宽度。我将 anchor 标记的最高值设置为 50%，这告诉它向下移动父级高度的 50%。但这是使用 anchor 标记的左上角作为移动点，因此链接不是完全垂直居中 - 它有点低。这就是我将 margin-top 设置为 -1em 的原因。 1em = 默认字体大小。所以 margin-top 的 -1em 告诉它向“负顶部”方向移动 - 也就是向上 - 移动等于字体大小的单位。现在，基线相对于父元素垂直居中。