如何解决Bootstrap大字体中Font Awesome图标与输入框的对齐问题

嘿，我知道你在做自助终端界面时遇到的这个对齐难题——用了大字体后，为了让输入框和标签对齐给input加了margin-top:10px，结果Font Awesome图标跟着错位了。这事儿我之前也碰到过，问题出在你只给输入框加了margin，但输入组里的图标容器没跟着调整，自然就错开了。

问题出在哪？ #

你给标签设了font-size:28px !important，比Bootstrap默认的label字体大太多，默认的垂直对齐逻辑直接失效了。单独给input加margin-top会让输入框下移，但input-group-addon（也就是放图标的那个span）还是留在原来的位置，两者自然就不在同一水平线上了。

两种可行的修复方案 #

方案1：让标签和输入组垂直居中对齐（推荐）

直接移除给input加的margin-top，改用flex布局让大字体标签和输入组垂直居中，从根源上解决对齐问题：

修改后的完整CSS：

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);

html, html * { font-family: Roboto; }

form label {
  font-size: 28px !important;
  /* 用flex让大标签垂直居中 */
  display: flex;
  align-items: center;
  min-height: 46px; /* 匹配input-lg的高度，确保对齐更稳定 */
}

form input, form textarea, form select {
  /* 删掉原来的margin-top */
  /* margin-top:10px; */
  font-family: Roboto;
  font-weight: bold;
}

.recuo{ padding-left:30px; }
.fonte_big { font-size: 28px !important; }
.form-container { background-color: rgba(0, 0, 0, 0.6); padding: 20px; margin-top:50px; }

方案2：给整个输入组添加上边距

如果你更习惯用margin来调整位置，可以把margin-top加到整个input-group上，这样图标和输入框会作为一个整体下移，保持对齐：

修改后的CSS片段（只改相关部分）：

form input, form textarea, form select {
  /* 移除单独给input的margin-top */
  /* margin-top:10px; */
  font-family: Roboto;
  font-weight: bold;
}

/* 给整个输入组加margin，让它和标签对齐 */
.input-group {
  margin-top: 10px;
}

效果说明 #

• 方案1的优势是不用硬写margin值，不管标签字体多大，都能自动和输入组垂直居中，适配性更强，适合自助终端这种需要大字体的场景。
• 方案2更直接，适合快速调整，但如果后续修改标签字体大小，可能需要跟着调整margin值。

你可以根据自己的界面需求选其中一种，这样就能同时保证标签和输入区域对齐，Font Awesome图标也不会错位啦。

内容的提问来源于stack exchange，提问作者Luiz Alves