css - 定位输入占位符，图标居中

Question

我正在使用 this 开发 ionic 应用程序 ionic 成分。

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="Search">
  </label>
  <button class="button button-clear">
    Cancel
  </button>
</div>

我可以使用此 CSS 将占位符居中。但是，只有文本占位符居中。我的意图是使 ionic 搜索图标和占位符都像下图一样作为一个整体居中。

注意:不应假定占位符文本的长度。例如:根据文本长度对左右像素进行硬编码。

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

Answer 1

尝试用伪元素替换图标元素:

::-webkit-input-placeholder {
   text-align: center;
}

::-webkit-input-placeholder::before {
  content:'\1F50D';
  padding-right: .2em;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

:-moz-placeholder::before {
  content:'\1F50D';
  padding-right: .2em;
}

<input type="search" placeholder="Search">

fiddle :https://jsfiddle.net/7yxdfewq/