Html CSS-如何将背景图像与底边对齐？包括Jsfiddle

我试图在底部边框的顶部显示一个图像，但它被安排在底部边框元素（在本例中，名为“分隔符”）的后面，我无法使其正确对齐

我希望图像显示在边框元素的中间和上方。在垂直方向上，我试图使图像左右两侧的1px线与1px边框对齐，使其看起来像是一个元素

代码如下：

.divider {
border-bottom: 1px solid #c3c3c3;
clear: both;
display: block;
margin-bottom: 20px;
padding-top: 20px;
width: 100%;
}

.sidearrow {
background: url(http://s16.postimage.org/sbf7v9n75/sidearrow.png) 50% 14px no-repeat;
width: 100%;
height: 25px;
}​    

<p>Here is some content above</p>

<div class="sidearrow"></div>
<div class="divider"></div>

<p>Here is some content below</p>​

.divider{
边框底部：1px实心#C3C3；
明确：两者皆有；
显示：块；
边缘底部：20px；
填充顶部：20px；
宽度：100%；
}
.侧箭头{
背景：url(http://s16.postimage.org/sbf7v9n75/sidearrow.png)50%14px无重复；
宽度：100%；
高度：25px；
}​    
下面是上面的一些内容

下面是一些内容
​

和JSFIDLE：

---

你有什么办法让它工作吗？提前谢谢。

不完全确定你想要什么，但这就是你想要的效果吗

.divider {
    border-bottom: 1px solid #c3c3c3;
    clear: both;
    display: block;
    margin-bottom: 20px;
    padding-top: 20px;
    width: 100%;
}

.sidearrow {
    background: url("http://s16.postimage.org/sbf7v9n75/sidearrow.png") no-repeat scroll center top transparent;
    width: 100%;
    height: 25px;
}

---

不确定这是否是您想要的，但根本不需要填充：

---

箭头图像仍在.divider的下边框后面对齐。您能发布您期望结果的屏幕截图吗。。。。。。。。。。。。。。