背景位置SVG搜索圖標（可能的錯誤？）

input { 
    border-radius: 5px; 
    border: none; 
    font: normal 13px "Trebuchet MS"; 
    padding: 0 0 0 30px; 
    width: 220px; 
    height: 30px; 
    margin: 0 auto; 
    display: block; 
    background-color: #ccc; 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.313 250.313" width="512" height="512" enable-background="new 0 0 250.313 250.313"><path d="M244.186 214.604l-54.379-54.378c-.289-.289-.628-.491-.93-.76 10.7-16.231 16.945-35.66 16.945-56.554 0-56.837-46.075-102.912-102.911-102.912s-102.911 46.075-102.911 102.911c0 56.835 46.074 102.911 102.91 102.911 20.895 0 40.323-6.245 56.554-16.945.269.301.47.64.759.929l54.38 54.38c8.169 8.168 21.413 8.168 29.583 0 8.168-8.169 8.168-21.413 0-29.582zm-141.275-44.458c-37.134 0-67.236-30.102-67.236-67.235 0-37.134 30.103-67.236 67.236-67.236 37.132 0 67.235 30.103 67.235 67.236s-30.103 67.235-67.235 67.235z" fill="#475250" fill-rule="evenodd" clip-rule="evenodd"/></svg>'); 
    background-size: 19px; 
    background-position: center 10px; 
    background-repeat: no-repeat; 
}

此代碼應顯示與搜索圖標一個輸入欄從左邊10px的，垂直居中，而不是它在杆的中心和垂直偏移。當我改變：背景位置SVG搜索圖標（可能的錯誤？）

background-position: center 10px;

到：

background-position: center left;

它做什麼，我想它，但缺少10px的填充到左側。關於這裏發生了什麼的任何線索？我只是無法正常工作。

來源

2016-04-07 Tazmo

問題已解決。我是個白癡。我指定X代替Y，反之亦然...... – Tazmo

呵呵。就在我發佈答案的時候。 = d –

background-position: 10px center應該爲你做。

使用中心和左是僅使用關鍵字，瀏覽器以某種方式能夠得到正確的，因爲他可以告訴左邊不是作爲一個垂直單位。

來源

2016-04-07 13:24:38

背景位置SVG搜索圖標（可能的錯誤？）

回答

相關問題