Question

我尝试制作响应式登录表单。在这里我想让输入和它旁边的图标并排和垂直居中。

我到目前为止，当新线突破时，他们会聚在一起。

问题：

当我尝试通过将line-height: 50px指定给i元素（与外部div具有相同高度）来使图标垂直对齐时，外部div被拉伸到55px。而且我不知道为什么。

如果我将line-height更改为40px，则间隙消失但图标实际上不是垂直居中的。

我不明白为什么会这样。它与fontawesome有关吗？

因为当我为图标指定一个非常小的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;
}

小提琴：jsfiddle

Answer 1

好的，我发现了我的错误。类vertical-align: top缺少.left个缺失。蒙上眼睛到最大：D。

居中图标的行高会影响响应输入中的外部div

1 个答案: