分隔符與中間的圖像圖標

Question

我正在嘗試使圖像在中間的分隔符。這也是響應。

我在顯示圖標/圖像的中間和全尺寸時遇到問題。它似乎切斷了頂部和底部。有人可以看看代碼？

<div class='line-icon'></div> 

.line-icon { 
    text-align: center; 
    background-image: url('http://www.welzendesign.com/startransfer/wp-content/uploads/2015/10/ster.png'); 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.line-icon::before, .line-icon::after { 
    width: 25%; 
    height: 1px; 
    border-top: 1px solid #837048; 
    display: inline-block; 
    content:''; 
    padding-top: 0.5em; 
    margin-left: 5%; 
    margin-right: 5%; 
} 

https://jsfiddle.net/L5p8khya/

Answer 1

這裏是你試圖讓。檢查結果

.line-icon { 
 
    box-sizing: border-box; 
 
    position:relative; 
 
    text-align: center; 
 
    background-image: url('http://www.welzendesign.com/startransfer/wp-content/uploads/2015/10/ster.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    font-size:0; 
 
    height: 40px; 
 
} 
 
.line-icon::before, .line-icon::after { 
 
    box-sizing: border-box; 
 
    width: 40%; 
 
    height: 1px; 
 
    border-top: 1px solid #837048; 
 
    display: inline-block; 
 
    content:''; 
 
    margin-left: 5%; 
 
    margin-right: 5%; 
 
    position:relative; 
 
     top: 50%; 
 
    -moz-transform: translatey(-50%); 
 
    -ms-transform: translatey(-50%); 
 
    -o-transform: translatey(-50%); 
 
    -webkit-transform: translatey(-50%); 
 
    transform: translatey(-50%); 
 
}

<div class='line-icon'></div>

這似乎是工作的小提琴

Answer 2

是覺得這之後你在做什麼？只要給圖像一個高度。還要添加一個等於圖像一半的邊距（在這種情況下爲20px）。

.line-icon { 
 
    text-align: center; 
 
    background-image: url('http://www.welzendesign.com/startransfer/wp-content/uploads/2015/10/ster.png'); 
 
    height: 40px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 
.line-icon::before, .line-icon::after { 
 
    width: 25%; 
 
    height: 1px; 
 
    border-top: 1px solid #837048; 
 
    display: inline-block; 
 
    content:''; 
 
    padding-top: 0.5em; 
 
    margin-left: 5%; 
 
    margin-right: 5%; 
 
    margin-top: 20px; 
 
}

<div class='line-icon'></div>