Bootstrap输入组插件对齐

Question

如何在input-group-addon的中心对齐图标？

这是我的代码：

        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-users" aria-hidden="true"></i></span>
            <input id="email" type="text" class="form-control" name="email" placeholder="Email">
        </div>
        <div class="input-group">
            </center><span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
            <input id="password" type="password" class="form-control" name="password" placeholder="password">
        </div>
        <div class="mt-2">
           <a href="#" class="btn btn-info btn-lg mr-5">登入</a>
           <a href="#" class="btn btn-primary btn-lg ml-5">註冊</a>
        </div>

Answer 1

当我在头部添加CSS样式时，它工作得很好。像这样：

.input-group .input-group-addon .fa {width：4vh; position：center;}

link