Css 布局 bootstrap 叠加

Question

我知道有类似的问题，但我都试过了，都失败了。在此示例中，有 4 行带有图像，每行有一个 link。

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

IE "Mann" 中的 link 实际上是针对 "Badetuch".

我只想设置 css，以便每个图像的测试 class 位于每个图像的水平中心。

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

我正在使用 bootstrap 中的视图模块来创建网站。

希望这对 sense.Any 帮助将不胜感激。塔

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 屏幕尺寸的设置将传递给更大的尺寸）。我将 parent div 的边距和填充设置为 0，因为示例中您的框之间没有任何 space。我还给了他们一个边框来区分不同的图像和一个 box-sizing 的 border-box 以便他们能够正确地适合他们的列。

所以，为了让 link 在 div 内水平居中（这是关键 - 它与图像在同一列 div 内），我设置了宽度到 100%，也就是 parent（"col-xs-3"）的 100%，然后给它一个 text-align 的中心。锚标签默认是行内元素；它们仅与包含的文本要求的宽度一样宽，因此设置 text-align: center 而不设置 width: 100% 什么都不做，因为您实际上是在文本占据的宽度中居中，所以没有可见效果。设置 width: 100% 使其占据 parent div 的整个宽度，从而使其 space 居中。

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

Css 布局 bootstrap 叠加

Css layout bootstrap overlay

html

css

views

twitter-bootstrap