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

Questions
1

Hello,

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

<div class="list no-hairlines-md">
	<ul>
		<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="" >
				</div>
			</div>
		</li>

		<li class="item-content item-input">
			<div class="item-inner">
				<div class="item-title item-label">Days</div>
				<br>
				<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>
					<div class="stepper-button-plus"></div>
				</div>
			</div>
		</li>
																
	</ul>
</div>

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

2

Screenshot of what to be aligned?

3

support
support.PNG1915×480 11.1 KB

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

4
1 Like
5 
<div class="item-inner align-items-center">
1 Like
6

The answer I was looking for!