[英]Positioning a div circle on the center of four col-md-6 bootstrap div
I want to achieve a layout as shown in the figure below: 我要实现如下图所示的布局:
I have 4 col-md-6 dive with a background image (and size cover), i want to put on top of the center of them a circle with a text (completely implemented in CSS). 我有4个col-md-6下潜的背景图像(和尺寸封面),我想在它们的顶部放一个带有文本的圆(在CSS中完全实现)。
I want to keep the design responsive so I was wondering which is the best way of dealing with absolute and relative positioning and responsiveness? 我想保持设计的响应速度,所以我想知道哪种方法是处理绝对和相对定位以及响应速度的最佳方法?
you can make your row
div position: relative
create a circle
div that is position: absolute
within the row (next to your col-md-6
divs) and center the the circle div within the row using top, left
and negative margin
s 您可以将
row
div position: relative
,在position: absolute
创建position: absolute
的circle
div(在col-md-6
div旁边),并使用top, left
和负margin
s将行div居中
something like: 就像是:
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.