将div圆圈定位在四个col-md-6 bootstrap div的中心

Question

我想实现如下图所示的布局：

我有4个col-md-6潜水与背景图像（和大小封面），我想在它们的中心顶部放一个带有文本的圆圈（完全用CSS实现）。

我想保持设计的响应性，所以我想知道哪种是处理绝对和相对定位和响应的最佳方式？

Answer 1

您可以制作row div position: relative 在行内（circle div旁边）创建一个position: absolute div col-md-6，并使用top, left和margin将行中的圆圈div居中}Š

类似的东西：

＆＃13;

＆＃13;

.container {
    background-color: rgba(255, 255, 0, .5);
}

.row-with-medallion {
    position: relative;
    font-size: 24px;
    font-weight: bold;
}
.row-with-medallion .quadrant {
    color: #027BC4;
    text-align: center;
    padding: 30px;
    margin: 45px 0;
    background: white;
}
.the-medallion {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -75px;
    margin-left: -75px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: rgba(2, 123, 196, 1);
    color: #B8BFC5;
    text-align: center;
    line-height: 150px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row row-with-medallion">
        <div class="col-md-6 quadrant">col-md-6</div>
        <div class="col-md-6 quadrant">col-md-6</div>
        <div class="col-md-6 quadrant">col-md-6</div>
        <div class="col-md-6 quadrant">col-md-6</div>
        <div class="the-medallion">???</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;