How to center ui-float-label - css

Question

I'm having the following template:
<div class="smallCard">
<p-card class="centered">
<p-header>
<img width="200" height="100" src="assets/images/vendor.svg" />
</p-header>
<p-messages></p-messages>
<span class="ui-float-label">
<input id="username" type="text" pInputText [(ngModel)]="username" required>
<label for="username">{{'Username' | translate}}</label>
</span>
<br>
<span class="ui-float-label">
<input id="password" type="password" pPassword [feedback]="false" [(ngModel)]="password" required />
<label for="password">{{'Password' | translate}}</label>
</span>
<br>
<p-checkbox name="permanent" value="true" label="{{'Remember me' | translate}}" [(ngModel)]="isPermanent">
</p-checkbox>
<p-footer>
<p-button label="Login" (onClick)="login()"></p-button>
</p-footer>
</p-card>
</div>
Where as the important css classes are:
.centered
{
text-align: center;
}
.smallCard
{
margin-top: 20%;
margin-left: 40%;
margin-right: 40%;
}
Which results in:
Obviously the labels aren't centered / aligned with the inputs. But how do I achieve this with primeng's float labels?

Answer 1

The label should have an absolute position;
For example:
var element = document.getElementById("label");
function handleFocus() {
element.classList.add("active");
}
function handleBlur() {
var myInput = document.getElementById("input");
if (!myInput.value) {
element.classList.remove("active");
}
}
.wrapper {
position: relative;
}
label {
position: absolute;
display: flex;
align-items: center;
height: 50px;
left: 10px;
}
.active {
height: 20px;
}
input {
padding: 5px;
widt: 100px;
height: 40px;
border: 2px solid purple;
border-radius: 4px;
}
<div class='wrapper'>
<label id='label'>blabla</label>
<input id='input'
onFocus="handleFocus();"
onBlur="handleBlur();"
/>
</div>