0

我有一个图像我试图显示在底部边框的顶部，但它被安排在底部边框元素的后面（在本例中，名为“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/

任何想法如何让它发挥作用？提前致谢。

4

2 回答 2

0

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

.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/

于 2012-09-05T09:43:58.967 回答
0

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

http://jsbin.com/ibaveg/1/

于 2012-09-05T09:44:36.277 回答