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

Question

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

我有 4 个带有背景图像(和尺寸封面)的 col-md-6 dive，我想在它们的中心顶部放一个带有文本的圆圈(完全用 CSS 实现)。

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

Answer 1

你可以让你的 row div position: relative创建一个 circle div，它是 position: absolute 在行内(在你的 col-md-6 div 旁边)并使圆 div 居中在行内使用 top, left 和负 margins

类似于:

.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;
}

<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>