居中图标的线高影响响应输入中的外部div。

Question

我试着做一个反应灵敏的活字。在这方面，我想使输入和它旁边的图标保持并排和垂直中心。

我走得太远了，当新的突破击中时，他们就团结在一起了。

问题：

当我试图使图标垂直对齐时，将line-height: 50px分配给i元素(与外部div的高度相同)时，外部div将被拉伸到55 as。我也不知道为什么。

如果我将line-height更改为40 is，则缺口将消失，但图标并不是真正的垂直中心。

我不明白为什么会这样。有火锅吗？

因为当我给图标分配一个很小的font-size时，错位也在消失。

任何帮助都很感激。

HTML：

<div class="row-fluid">
<div class="span6">
    <div class="input-wrap">
        <div class="left">
            <input type="text" />
        </div>
        <div class="login-icon" style="border: 1px solid red;">
            <div class="login-icon-inner" style="border: 1px solid green;">
                <i class="fa fa-user"></i>
            </div>
        </div>
    </div>    
</div>
<div class="span6">
    <div class="input-wrap">
        <div class="left">
            <input type="password" />
        </div>
        <div class="login-icon">
            <div class="login-icon-inner">
                <i class="fa fa-lock"></i>
            </div>
        </div>
    </div>
</div>

​

CSS：

.input-wrap {
 display:              table;
 padding:              0;
}
.left {    
 display:              table-cell;
 width:                100%;
 height:               50px;
}
.left > input {
 width:                100%;
 height:               50px;
 box-sizing:           border-box;
 border-radius:        0;
 margin:               0;
}
.login-icon {
 display:              table-cell;
 height:               50px;
}
.login-icon-inner {
 width:                50px;
 height:               50px;
 text-align:           center;
 background-color:     rgba(230,230,230,1);
}
.span6 {
 margin-top:           5px;
}
body {
 background-color:     rgba(250,250,250,1);
}
i.fa {
 font-size:            24px;
 line-height:          50px;
 margin:               0;
 vertical-align:       baseline;
}

小提琴：小提琴

Answer 1

好吧我发现了我的错误。在vertical-align: top类.left中，缺少了一个缺失的.left。蒙住双眼至max :D.