Question

其他人已经问了类似的东西，但我似乎正在努力将字体真棒图标与输入框垂直对齐。当你不使用大小来增加字体真棒图标时，它可以正常工作，但只要你输入fa-3x或类似的东西，就会增加margin-top。

有人有什么想法吗？

简单的例子是：

<div>
    <i class='icon icon-3x icon-camera'></i>
    <span id="inputfield">
      <input type="text" value="input here">
    </span>
</div>

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#inputfield{
    line-height: 30px;
    float: left;
}

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<form>
<fieldset>
<legend><i class="fa fa-user" aria-hidden="true"></i></legend>
<input type="text" class="something">
</fieldset>
</form>

Answer 2

Flexbox很神奇，Flexbox是我们的救星。

＆＃13;

div{
   border : blue dashed 1px;
   display : flex;
   align-items : center;
}

＆＃13;

<div>
    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-camera-128.png"/>
    <input type="text" placeholder="input here">
</div>

＆＃13;

Answer 3

您可以删除class fa-3x并为<i>或相应的类提供字体大小

找到小提琴here

<div>
    <i class='fa fa-camera'></i>
    <span id="inputfield">
      <input type="text" value="input here">
    </span>
</div>

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
i.fa-camera{
  font-size:35px;
}
#inputfield{
    line-height: 30px;
    float: left;
}

Answer 4

可以用这个来实现 HTML

<div class="input-group">
    <i class='fa fa-3x fa-camera'></i>
      <input type="text" value="input here">
</div>

CSS

div.input-group
{
  display:table;
  margin:30px;
}

.input-group > input[type=text],
.input-group > i.fa
{
  display:table-cell;
  vertical-align:middle;
}

.input-group > i.fa
{
  line-height:20px;
}

此处是参考链接codepen link

我已经为div元素添加了边距以使其可见。

希望这会有所帮助......

Answer 5

（另一种）flexbox解决方案

＆＃13;

* {
  box-sizing: border-box;
}

#inputfield {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 0;
}

#inputfield::before {
  font-family: FontAwesome;
  font-size: 48px;
  content: "\f030";
  margin: 0 5px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <div id="inputfield">
    <input type="text" value="input here">
  </div>
</div>

＆＃13;

中心输入框和字体真棒图标

5 个答案: