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

【问题标题】：How can I vertically center an icon in an input?如何在输入中垂直居中图标？
【发布时间】：2022-02-03 22:36:37
【问题描述】：

我不知道如何在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 中垂直居中图标？

【问题讨论】：

标签： html angular-ui-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。