How can I center my input fields with all the spans aligned to the left?
I would like the inputs to be centered on the page, with supporting spans aligned to the left or right of the input lane.
I am utilizing some Bootstrap 4 classes for this layout.
CSS
span {
color: oldlace;
}
input {
position: relative;
display: inline-block;
}
HTML
<form (submit)="submit()">
<div id="egg" class="invisible">
<span class="p-1">Egg</span>
<input class="text-center rounded-pill border border-danger p-1 m-1" type="number" title="Egg" name="egg"
placeholder="gram" [(ngModel)]="protein.egg">
<!-- <span class="p-1"> size</span><br> -->
</div>
<div id="bread" class="invisible">
<span class="p-1">Bread</span>
<input class="text-center rounded-pill border border-danger p-1 m-1" type="number" title="Bread" name="bread"
placeholder="gram" [(ngModel)]="protein.bread">
<!-- <span class="p-1"> slices , 30g pre slice</span><br> -->
</div>
</form>
https://i.sstatic.net/Mr0N7.jpg https://i.sstatic.net/85xqq.jpg