我正在使用 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>
看起来像这样:
最佳答案
中间的文本对齐已经居中,
<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>
关于html - 修改后的输入元素不会居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50707119/