[英]How can I vertically center an icon in an input?
I don't know how to center an icon vertically inside an input
.我不知道如何在
input
中垂直居中图标。 This is my code:这是我的代码:
<i-feather name="user" class="fea icon-sm icons"></i-feather>
<input type="text" class="form-control ps-5" 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
?如何在
input
中垂直居中图标?
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 class="input-wrapper"> <i class="icon">2</i> <input type="text" class="form-control ps-5" placeholder="Name" name="s" required=""> </div>
There are two styling options you can use.您可以使用两种样式选项。 These are block and flex.
这些是块和弹性。 Block will not be responsive while flex will be responsive.
Block 不会响应,而 flex 会响应。 I hope this solve your issue.
我希望这能解决你的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.