Css布局引导覆盖

Question

我知道有一个类似的问题，但我已经尝试过他们都失败了。 在这个例子中，有4行每个都有一个图像和一个链接。

我想每个链接覆盖每个图像，但它似乎总是把整个宽度作为相对。

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

我只是想设置CSS，使每个测试类在每个图像的水平中心。

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

我使用bootstrap的views模块来创建网站。

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

Answer 1

哦，男孩，你是用桌子构造的吗？准备好去内脏！ （不是由我 - 我会留下其他人）。另外，在SO上发布问题时，最好在编辑工具栏中使用“JS/CSS/HTML代码片段”选项，以便人们可以通读代码并看到结果而不是点击他们必须放大阅读的小图片。

现在你的问题 - 这是你做的。

.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”（为XS设定画面尺寸被传递到更大尺寸，除非另有说明）。 我设置父div的边距和填充为0，因为在示例中您的框之间没有任何空格。我还给了他们一个边界来区分不同的图像和边框的大小，以便他们能够正确地适合他们的列。因此，要获得链接在div中的水平居中（这是关键 - 它与图像在同一列div内），我将宽度设置为100％，这是100％的父级（ “col-xs-3”），然后给它一个中心的文本对齐。锚标签默认是内联元素;它们只与包含的文本要求的宽度相同，所以设置文本对齐：居中但不设置宽度：100％不会执行任何操作，因为您基本上是将文本居中放置在宽度中，因此没有可见的效果。设置宽度：100％使其占据父div的全部宽度，这使得它可以居中放置空间。

现在，为了使它在图像顶部垂直居中，我给它定位：绝对。这可以防止它脱离图像的方式。相对于第一个遇到位置非静态值的父代，位置为absolute的元素执行所要求的任何操作。 （这就是为什么我将父div的内容设置为相对的，但没有给它一个顶部或左边的值来移动它。）在我将它设置为绝对位置后，我必须告诉它相对于该父项的位置，我想让它走到中间。图像是父级包含的最大元素，因此父级的高度和宽度与图像的高度和宽度相同。我将锚标记的顶部值设置为50％，这表示它将向下移动父项高度的50％。但是，这是使用锚点标签的左上角作为移动点，因此链接不是很垂直居中 - 它有点低。这就是为什么我将margin-top设置为-1em。1em =默认字体大小。因此，margin-top的-1em指示它以“负顶部”方向移动 - 也就是说 - 以等于字体大小的单位移动。现在，基线相对于父元素是垂直居中的。

让我来告诉你阅读Bootstrap文档。你没有正确使用它。祝你的项目好运。