How can I vertically center an icon in an input?

Question

I don't know how to center an icon vertically inside an input . This is my code:

<i-feather name="user" class="fea icon-sm icons"></i-feather>
<input type="text" class="form-control ps-5" placeholder="Name" name="s" required="">

Currently it looks like this:

and I want to achieve an effect like this:

How do I center the icon vertically in the input ?

Answer 1

You can do it like this:

 <style>.input-wrapper { display: flex; position: relative; }.input-wrapper.icon { position: absolute; top: 50%; transform: translateY(-50%); padding: 0 10px; }.input-wrapper input { padding: 0 0 0 25px; height: 50px; } </style> <div class="input-wrapper"> <i class="icon">2</i> <input type="text" class="form-control ps-5" placeholder="Name" name="s" required=""> </div>

Answer 2

There are two styling options you can use. These are block and flex. Block will not be responsive while flex will be responsive. I hope this solve your issue.