How can I vertically center an icon in an input?-CodePudding

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

<i-feather name="user" ></i-feather>
<input type="text"  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?

CodePudding user response：

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 >
  <i >2</i>
  <input type="text"  placeholder="Name" name="s" required="">
</div>

CodePudding user response：

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.