填充邊界的垂直或水平中心圖像

我有一個邊框，它適合容器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; 
}

來源

2014-03-25 lituoklis13

向我們展示你已經嘗試了什麼。 – Ari

我不知道，我能做些什麼... – lituoklis13

SO是幫助你，而不是爲你做什麼。顯示一些代碼，儘可能接近你所需要的，就像你能夠創建的那樣。你也可以嘗試背景，也許是bg圖像。 – Ari

是否空白「必須」要填充？或者你可以給它分配一定的寬度嗎？

我使用此代碼更新您的提琴：

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

來源

2014-03-28 04:53:22 Diego

我已經更新您的要求之下，並在下面小提琴也可以。請參閱該...

這裏：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; 
}

來源

2014-03-28 11:16:33 GomathyP

填充邊界的垂直或水平中心圖像

回答

相關問題