连续列之间的响应文本答案

【问题标题】：Responsive Text in between column in a row连续列之间的响应文本
【发布时间】：2019-06-13 10:53:45
【问题描述】：

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

我目前的尝试如下：

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属性来实现将链接放在列之间但没有响应的场景。

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

【问题讨论】：

请检查以下代码。有用。在我的本地系统中测试过，是的，它也是响应式的

标签： css angular twitter-bootstrap bootstrap-4

【解决方案1】：

使用变换居中

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

【讨论】：

【解决方案2】：

我刚刚调整了您的 CSS，应用 top:50%;left:50%;transform: translate(-50%,-50%) 使其与水平和垂直中心对齐。确保父元素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; 
}

【讨论】：