CSS3 and Bootstrap 3 - How to place a div on top of 2 divs, in between, in the middle
I am using Bootstrap 3 in my application. I am trying to create two rectangles and one smaller rectangle that will sit on top of the two, in the middle of their "border", as shown in the image I attached. This is what I have done so far:
HTML:
<div class="row">
<div class="col-sm-3 center">
<!-- place holder for extra content-->
</div> <!-- end of div lg col 3 -->
<div class="col-sm-3 center x">
</div> <!-- end of div lg col 3 -->
<div id="both">hello</div>
<div class="col-sm-3 center x">
</div> <!-- end of div lg col 3 -->
<div class="col-sm-3 center">
<!-- place holder for extra content-->
</div> <!-- end of div lg col 3 -->
</div><!-- end of first row div-->
CSS3:
.center.x{
border: 1px solid #d4d4d4;
}
.center{
text-align: center;
}
#both{
width:100px;
height: 50px;
border: 1px solid #d4d4d4;
text-align: center;
padding-top: 14px;
color: #000000;
position:absolute;
z-index:10;
}
.x{
width:200px;
height:300px;
background: #9ba3f7;
}
JSfiddle .
+3
source to share
1 answer
position the last center element as absolute, offset the element to the center and let the top edge compute to be in the vertical center or compute it with javascript. Keep your code simple, I didn't understand why you have 4 divs in a row and it only shows 2 divs.
Check the script
Html
<div class="row">
<div class="col-xs-6 center x">DIV 1</div>
<div class="col-xs-6 center x">DIV 2</div>
</div><!-- end of first row div-->
<div class="col-xs-4 col-xs-offset-4 center x y">DIV 3</div>
CSS
.center.x{
border: 1px solid #d4d4d4;
}
.center{
text-align: center;
}
.x{
height:300px;
background: #9ba3f7;
}
.y{
height:50px;
position:absolute;
top:150px
}
+5
source to share