居中小于其div的边框

Question

我有两个col-xs-12宽的div。它们之间没有边缘，所以它们触摸。我想在它们之间添加一个边框，就像右边的图像（我目前在左边的图像）。

我尝试添加1 x高11宽的色谱柱并使其居中，但当然您可以看到边框两侧的两行之间存在间隙。

这是整个事情的jfiddle。

<div class="row top-buffer-10">
    <div class="col-xs-12">
        <div class="header-text">
        <p style="font-size:130%"><b>%REGION%</b></p>
        <p style="padding-bottom:15px;">(currently selected)</p>
        </div>
    </div>
</div>
<div class="row top-buffer-10">
    <div class="col-xs-12">
        <div class="img-with-text">
            <img style="margin-top:5px;" src="img/gsd_list_contact.png" alt="itscl" />
            <p style="font-size:90%;padding-left:0px;"><b>PHONE:</b> %LOCAL_PHONE%<br>
                    <b>TOLL FREE:</b> %TOLL_FREE%<br>
                    <b>LANGUAGE:</b> %LANGUAGE%
            </p>
        </div>
    </div>
</div>  

这些是需要注意的两个相关div。

似乎有点混乱，我希望边框小于div，比如在边框顶部或边框底部。

了解边框是如何完全到达div的边缘的。感谢。

Answer 1

我不确定它是否具有您想要的效果，但您是否尝试过以下操作：

<div class="img-with-text" style="border-top: 1px solid black;">

显然你可以摆弄颜色等，或者将它添加到css类中。

编辑：

也许这就是：

<div class="col-xs-12"> <div style="margin: 0 10px; display: block; height: 1px; background: #000;"></div> <div class="img-with-text">

您可以使用边距来为您提供所需边缘的偏移。可能不是最优雅的解决方案，但似乎可以获得您之后的视觉效果？

Answer 2

这是一个可能的解决方案：https://jsfiddle.net/yjtrk00o/4/

修改

• 添加一个名为division的css，如下所示
• 在您的HTML中，在<hr class="division"/>
上方添加第<div class="img-with-text">行

<强> CSS

.division{
    border-top:1px solid #D3D3D3;   
    margin-top:0px;
    margin-bottom:0px;
    margin-left:10px;
    margin-right:10px;
}

<强> HTML

<div class="col-xs-12">
<hr class="division"/>
<div class="img-with-text">