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?
>Solution :
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>