如何在实现 css 导航栏的 BUTTON 内居中对齐图标？

Question

我在 SO 上阅读了许多关于如何在 BUTTON 内居中对齐 ICON 的帖子，但它们都不适用于我的情况，因为在我的情况下，BUTTON 位于导航栏内。

请参阅jsfiddle中的代码，也粘贴在下面的代码块中。

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


        <div class="navbar-fixed">
          <nav class="teal">
            <div class="container">
              <div class="nav-wrapper">
                <a href="#" class="brand-logo">LOGO </a>
                <ul class="right hide-on-med-and-down">
                  <li>
                    <form class="orange" style="">
                      <div style="display: inline-flex; border: 1px black solid; align-items: center;">
                        <input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;">
                        <button class="btn" type="submit" style="background: blue; height:45px;">
                          <i class="material-icons" style="border: 1px red solid; display: inline; margin: auto;">search</i>
                        </button>
                      </div>
                    </form>
                  </li>
                  <li>
                    <a href="#home">Home</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>

问题是，搜索 ICON 不在 BUTTON 内垂直居中，我尝试了许多建议的方法，但都没有奏效。

请帮忙！

Answer 1

如果您的导航栏具有固定高度，则此 css 对您来说足够https://jsfiddle.net/fw9cmaq6/

.material-icons{
 margin-top:-8px;
}

如果不是固定高度，只需使用它

.material-icons{
  display: table-cell !important;
  vertical-align: middle;
  line-height:0 !important;
  height:100% !important;
}

Answer 2

您只需将line-height: 45px添加到您的icon ，因为您添加了height:45px; 到你的按钮，就像这样：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<div class="navbar-fixed">
  <nav class="teal">
    <div class="container">
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">LOGO </a>
        <ul class="right hide-on-med-and-down">
          <li>
            <form class="orange" style="">
              <div style="display: inline-flex; border: 1px black solid; align-items: center;">
                <input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;">
                <button class="btn" type="submit" style="background: blue; height:45px;">
                  <i class="material-icons" style="border: 1px red solid; display: inline; margin: auto;line-height:45px;">search</i>
                </button>
              </div>
            </form>
          </li>
          <li>
            <a href="#home">Home</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

Answer 3

您可以通过调整代码中搜索 div 的边距来修复它。 希望这可以帮助。 我已经在你的代码中修复了它。

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="navbar-fixed"> <nav class="teal"> <div class="container"> <div class="nav-wrapper"> <a href="#" class="brand-logo">LOGO </a> <ul class="right hide-on-med-and-down"> <li> <form class="orange" style=""> <div style="display: inline-flex; border: 1px black solid; align-items: center;"> <input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;"> <button class="btn" type="submit" style="background: blue; height:45px;"> <div style="margin-top: -9px;"> <i class="material-icons" style="border: 1px red solid; display: inline; ">search</i> </div> </button> </div> </form> </li> <li> <a href="#home">Home</a> </li> </ul> </div> </div> </nav> </div>

Answer 4

你可以检查这个（全屏查看）

 #container { height: 65px; display: flex; } #search-bar { height: 100%; } button.btn { height: auto;important. }:material-icons { vertical-align; middle: justify-content; center: align-items; center; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="navbar-fixed"> <nav class="teal"> <div class="container"> <div class="nav-wrapper"> <a href="#" class="brand-logo">LOGO </a> <ul class="right hide-on-med-and-down"> <li> <form class="orange"> <div id="container"> <input id="search-bar" type="search" placeholder="text text..."> <button class="btn" type="submit" style="background: blue; height:45px;"> <i class="material-icons">search</i> </button> </div> </form> </li> <li> <a href="#home">Home</a> </li> </ul> </div> </div> </nav> </div>