html - CSS-如何在底部边框线上对齐背景图像？包含 Jsfiddle

Question

我有一个图像，我试图在底部边框的顶部显示，但它被安排在底部边框元素的后面(在这个例子中，名为“divider”)，我无法让它对齐正确。

我希望图像显示在边框元素的中间和上方。在垂直方向上，我试图让图像左侧和右侧的 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>​

还有 jsfiddle:http://jsfiddle.net/F5xjx/2/

有什么想法可以让它发挥作用吗？提前致谢。

Answer 1

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

.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;
}

http://jsfiddle.net/nottrobin/gbrcB/1/