Bootstrap 3 Css如何在div的中心对齐图标？

Question

代码：

<div class="input">
<div class="icon glyphicon glyphicon-user">&nbsp;</div>
<input type="text" name="username" maxlength="20" placeholder="Login">
</div>

结果我们有：

请告诉我如何在我的代码中 该图标将位于中心白色块中？

Answer 1

.input .icon {padding: 7px 7px;}

设置填充所需的内容。

享受）

Answer 2

尝试这样的事情。相应地调整％。

.input .icon { 
    display: block; 
    width: 50%; 
    margin: auto; 
}

另一种选择是

.input { text-align: center; }

.icon { display: inline-block; padding-top: 10px; }