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

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

您可以使用两种样式选项。这些是块和弹性。 Block 不会响应，而 flex 会响应。我希望这能解决您的问题。

Answer 2

你可以这样做：

<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>

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

How can I vertically center an icon in an input?

html

angular-ui-bootstrap