html - 修改后的输入元素不会居中

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

谁能告诉我这是怎么回事？

编辑:您的代码导致输入下方的按钮 float 在输入旁边，而不是使按钮居中。这是您实现的代码加上按钮的 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>