Question

我正在制作一个带有angular和bootstrap的应用程序，并且给出了我需要在迭代的第三行中的两列之间放置链接的要求。

我目前的尝试如下：

HTML：

<div class="container">
    <div class="row">
        <div class="col-6" *ngFor="let data of suggestions">
            <div class="data-wrapper">
                {{ data.id }}
                <br>
                {{ data.name }}
            </div>
        </div>
        <span class="middle-text-link"> Click here to go to link </span>
    </div>
</div>

Css：

.data-wrapper {
  padding: 30px;
  border: 1px solid #000;
}

.middle-text-link {
    position: absolute;
    top: 55%;
    left: 25%;
    background-color: red;
    color: #fff;
    padding: 15px;
}

工作演示： https://stackblitz.com/edit/angular-bootstrap-4-starter-dr8t57

在这里，我已经使用上述CSS属性来实现将链接放置在列之间但无响应的情况。

请帮助我如何实现将链接文本放置在第三行中需要响应的两列之间的情况。

Answer 1

使用“变换”居中

.middle-text-link {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%); 
   background-color: red;
   color: #fff;
   padding: 15px; 
}

Answer 2

我刚刚通过应用top:50%;left:50%;transform: translate(-50%,-50%)来调整CSS使其与水平和垂直中心对齐。确保父元素class="container parent"为relative。这样您的CSS就可以通过这种方式

.parent{
  position: relative;
}
.middle-text-link {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%); 
   background-color: red;
   color: #fff;
   padding: 15px; 
}

连续列之间的响应文本

2 个答案: