如何在输入中垂直居中图标？

Question

我不知道如何在input内垂直地对一个图标。这是我的密码：

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

目前的情况如下：

​

​

我想达到这样的效果：

​

​

如何在input中垂直对图标

Answer 1

你可以这样做：

​

<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

有两个样式选项可以使用。这些是块和挠曲。块将不响应，而flex将响应。我希望这能解决你的问题。