将div圆放置在四个col-md-6引导程序div的中心

Question

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

我有4个col-md-6下潜的背景图像（和尺寸封面），我想在它们的顶部放一个带有文本的圆（在CSS中完全实现）。

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

Answer 1

您可以将row div position: relative ，在position: absolute创建position: absolute的circle div（在col-md-6 div旁边），并使用top, left和负margin s将行div居中

就像是：

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