[Solved] Align the Stepper Component in a list to center



Am having issues aligning the stepper component to center in a list.

<div class="list no-hairlines-md">
		<li class="item-content item-input">
			<div class="item-inner" > 
				<div class="item-title item-label">Name</div>
				<div class="item-input-wrap"> 
					<input type="text" disabled style="text-align:center;" id="input_name" placeholder="" >

		<li class="item-content item-input">
			<div class="item-inner">
				<div class="item-title item-label">Days</div>
				<div class="stepper stepper-fill stepper-init">
					<div class="stepper-button-minus"></div>
					<div class="stepper-input-wrap">
						<input type="text" value="5" min="5" max="30" step="5" id="input_days" readonly>
					<div class="stepper-button-plus"></div>

Any ideas on how I can set the align property of the stepper to center?


Screenshot of what to be aligned?


Ass you can see the 2 steppers are not aligned to the center. With v3 it was but after the upgrade they became misaligned.


<div class="item-inner align-items-center">


The answer I was looking for!