Question

我有一个边框，它适合容器div的100％宽度。我想做什么 - 在该边框的中心添加背景（或img标签），例如：

http://www.part.lt/img/8a22897d62de874896a3b62107032bd3507.gif

（“+”是图像，左右两行必须是边框）。空白区域必须是边界填充或边距。

我该怎么做？

我尝试过：

<div class="full-border">
   <div class="full-border-cross"></div>
</div>


.full-border {
     border-bottom: 1px solid rgb(204,204,204);
     padding: 13px 0; 
     position: relative;
}

.full-border-cross {
     background: #fff url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center;
     position: absolute; 
     width: 100%; 
     height: 100%; padding: 0 13px;
}

Answer 1

白色空间“有”填充吗？或者你可以给它指定一定的宽度吗？

我用这段代码更新了你的小提琴：

.full-border-cross {
     background: url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center #fff;
     position: absolute; 
     left: 50%;
     width: 40px; 
     height: 100%;
}

此处：http://jsfiddle.net/WHVbc/17/

Answer 2

我已在下面更新了您的要求，也可以在以下小提琴中找到。请参考......

此处：http://jsfiddle.net/wRa8n/

<div class="full-border"></div>
<div class="full-border-cross"></div>
<div class="full-border"></div>

.full-border {
    border-bottom: 1px solid #CCCCCC;
    display: inline-block;
    margin: 0 16px;
    padding: 0;
    width: 200px;
}

.full-border-cross {
    background: url("http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    height: auto;
    padding-top: 13px;
    width: 15px;
}

带填充的边框垂直或水平中心上的图像

2 个答案: