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

debugcn 发表于 Dev

用户5000215

我想寻求帮助。我想将按钮的字体真棒图标对齐。现在，只有当我的高度至少为50px时，它才会居中。

这就是我在说的：

这是我的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 -->

谁能帮我解决我的问题？

谢谢！

亲切的问候，凯文。

塞巴斯蒂安·布罗斯（Sebastian Brosch）

您只能将设置padding-top:0;为，.btn并且图标垂直居中。

这是一个工作的小提琴：https : //jsfiddle.net/sebastianbrosch/rw4eoz6b/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。