Twitter bootstrap 居中图标的线条高度影响响应输入中的外部div

我尝试创建一个响应性的登录表单。 在这里，我想让输入和它旁边的图标并排，垂直居中

我走得太远了，当新的线路中断时，他们就粘在一起了

问题:

当我试图通过将

行高：50px

指定给I元素（与外部div的高度相同）使图标垂直对齐时，外部div会拉伸到55px。我不知道为什么

如果我将

线高度

更改为40px，间隙将消失，但图标并非真正垂直居中

我不明白为什么会这样。是不是有点太棒了

因为当我为图标指定一个非常小的

字体大小时，错误放置也会消失

谢谢你的帮助

HTML:

小提琴：
好吧，我发现了我的错误。类
左
缺少一个
垂直对齐：top
。蒙着眼睛看max:D.
好吧，我发现了我的错误。类
左
缺少一个
垂直对齐：top
。蒙住眼睛最大：D.
设置
行高：40px
Center itOOPs maioman有正确的答案，抱歉，bud，没有看到您发布了此消息。目的是将图标设置为垂直对齐。我也有这个。但这不是我问题的解决办法。@termnml那么你应该解决第一个问题。更新您的问题，然后明确询问您想要什么。现在你的问题还不清楚你想要什么。@termnml我知道向下的投票不是坏事，它们给了改变的动力，你的问题现在清楚了，所以我把它改为向上的投票：）设置
行高：40px
Center itOOPs maioman有正确的答案，抱歉，bud，没有看到您发布了此消息。目的是将图标设置为垂直对齐。我也有这个。但这不是我问题的解决办法。@termnml那么你应该解决第一个问题。更新您的问题，然后明确询问您想要什么。现在你的问题还不清楚你想要什么。@TERMNM我知道否决票不是坏事，它们给了改变的动力，你的问题现在清楚了，所以我把它改为赞成票：）
<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>

.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;
}