将输入占位符定位在中心的图标

Question

我正在使用这种离子成分开发离子应用。

<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将占位符居中。 但是，只有文本占位符是中心。 我的目的是使离子搜索图标和占位符作为整体居中，如下图所示。

注意：不应假设占位符文本的长度。 例如：根据文本长度向左和向右硬编码像素。

::-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

尝试用伪元素替换icon元素：

 ::-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"> 

小提琴： https ： //jsfiddle.net/7yxdfewq/