如何在輸入中垂直居中圖標？

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

您可以使用兩種樣式選項。 這些是塊和彈性。 Block 不會響應，而 flex 會響應。 我希望這能解決你的問題。