修改后的输入元素不会成为中心

Question

我正在使用primeNG，我已经使用它创建了一个输入组。此输入字段应移动到中心，我知道我应该在包络容器上使用text-align: center。然而，当我这样做时，输入组仍然不会向右移动，我真的不知道是什么导致了这一点。这是我的代码：

CSS

.middle {
    text-align: center;
}

HTML

    <div class="middle ui-inputgroup">
      <input type="text" size="5" pInputText placeholder="Value">   
      <span class="ui-inputgroup-addon"><code>cm</code></span>      
    </div> 

ui-inputgroup是primeNG的本地类，更多信息在这里：https://www.primefaces.org/primeng/#/inputgroup

有谁可以告诉发生了什么事？

编辑：您的代码导致输入下方的按钮浮动到输入旁边而不是按钮居中。这是您实现的代码加上按钮的html代码：

  <div class="ui-g-12 ui-md-4 test">
    <div class="middle ui-inputgroup">
      <input type="text" size="5" pInputText placeholder="Value">   
      <span class="ui-inputgroup-addon"><code>cm</code></span>      
    </div>
  </div>

<button mat-raised-button id="newFilter" (click)="showDialog()">Add new filter</button>
</div>

它看起来像这样：

Answer 1

中间的文字对齐已经是中心，

<div class="ui-g-12 ui-md-4 test">
    <div class="ui-inputgroup">
        <span class="ui-inputgroup-addon">
           <i class="fa fa-user"></i>
        </span>
        <input pinputtext="" placeholder="Username" 
    type="text" class="ui-inputtext ui-corner-all ui-state-default ui-widget">
    </div>
</div>

式：

.ui-g-12.ui-md-4.test {
    margin: 0 auto;
}

input.ui-inputtext.ui-corner-all.ui-state-default.ui-widget {
    text-align: center;
}

<强>更新：

<div class="ui-g-12 ui-md-6 test" style="margin: 0 auto;">
    <div class="middle ui-inputgroup" style="display: inline-flex;">
      <input type="text" size="5" pinputtext="" placeholder="Value">   
      <span class="ui-inputgroup-addon"><code>cm</code></span>      
    </div>
    <button id="newFilter">Add new filter</button>
</div>