CSS3和Bootstrap 3 - 如何将div放在2个div之上，在两个div之间，在中间

Question

我在我的应用程序中使用Bootstrap 3。我试图创建两个矩形，一个较小的矩形将位于两个矩形的顶部，在它们的边界'＃34;的中间，就像我在图像中看到的那样连接。这是我到目前为止所做的：

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。

Answer 1

将最后一个中心元素定位为绝对，将元素偏移到中心并通过计算给出上边距，使其达到垂直中心或使用javascript计算。保持你的代码简单，我不知道你为什么连续4 div，它只显示2 div。

检查小提琴

  

http://jsfiddle.net/hdvp0052/

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
}