背景位置入力バー（可能なバグ？）

Question

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; 
} 

でSVGの検索アイコン。私は変更する場合：

background-position: center 10px; 

をする：

background-position: center left; 

それは、私はそれが何をしたいんが、左に10pxのパディングが不足しています。ここで何が起こっているかについての手がかりは？私はちょうどこれが正しく動作することができません。

Answer 1

background-position: 10px centerはあなたのために行う必要があります。

centerとleftを使用しているのはキーワードのみを使用しているため、ブラウザが何らかの理由で右に行くことができるのは、左が縦単位ではないことを伝えることができるからです。