Html 如何在引导按钮中对齐字体图标？

我想寻求一些帮助。我想在按钮的中间对齐字体很棒的图标。现在，只有当我的高度至少为50像素时，它才会居中

这就是我所说的：

这是我的css：

    .search {
      padding: 5px 0;
      width: 50px;
      height: 10px;
      position: relative;
      left: 10px;
      float: left;
      line-height: 22px;
    }

    .search input {
        position: absolute;
        width: 0px;
        float: Left;
        margin-left: 20px;
        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;
        height: 20px;
        line-height: 18px;
        padding: 0 2px 0 2px;
        border-radius:1px;
        top: 15px;

     }

     .search:hover input,
     .search input:focus {
        width: 100px;
        margin-left: 0px;
        z-index: 1000;
     }

    .btn {
      height: 20px;
      position: absolute;
      right: 0;
      top: 15px;
      border-radius:1px;
      z-index: 1001;

    }

以下是html：

  <!-- search -->    
  <div class="search">
    <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i></button>
  </div>
  <!-- einde search -->

有人能帮我解决问题吗

谢谢

亲切问候,，

---

凯文。

您只能设置

填充顶部：0

至

.btn

，图标垂直居中

---

这里有一把工作小提琴：

您只能设置

padding top:0

至

.btn

，图标垂直居中

---

这里有一把小提琴：

你看过文档了吗？有一些引导示例创建了一个JSFIDLE。很容易给你一个解决方案try.btn.fa.fa-search{text align:center；}@AnisHikmatAbu hmiad不起作用。它确实居中，但不在按钮的高度。它仍然认为它的高度是50像素。你看过文档了吗？有一些引导示例创建了一个JSFIDLE。很容易给你一个解决方案try.btn.fa.fa-search{text align:center；}@AnisHikmatAbu hmiad不起作用。它确实居中，但不在按钮的高度。它仍然认为它的高度是50像素。