modified input element won't center - html

Question

I am using primeNG and i have made an inputgroup with it. This input field should be moved to the center and i know that i should use text-align: center on the envelopping container for this. However when i do this the inputgroup still won't move to the right, i really don't know what is causing this. This is my code:
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>
The ui-inputgroup is a native class of primeNG, more info here: https://www.primefaces.org/primeng/#/inputgroup
Can anyone tell what is going on?
EDIT: Your code is causing the button below the input to float next to the input instead of centering the button. This is your code implemented plus the html code of the button:
<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>
it looks like this:

Answer 1

text-align of middle is already center,
<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>
style:
.ui-g-12.ui-md-4.test {
margin: 0 auto;
}
input.ui-inputtext.ui-corner-all.ui-state-default.ui-widget {
text-align: center;
}
update:
<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>