Bootstrap input-group-addon圖標置中

Question

請問Bootstrap中的input-group-addon，如果在裡面放圖標該如何置中呢？

我有試過用text-center讓那個使用者及密碼的圖標置中，但好像沒什麼用處，可以請教各位大神該如何讓他置中嗎？如下圖：

<div class="mt-3">
            <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">
                <span class="input-group-addon"><i class="fa fa-lock text-center" aria-hidden="true"></i></span>
                <input id="password" type="password" class="form-control" name="password" placeholder="password">
            </div>
        </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

试试把text-center加在span上，而不是上