如何在物化CSS导航栏中的按钮内居中对齐图标？

Question

我读了很多关于如何在按钮内居中对齐图标的帖子，但它们都不适合我的情况，因为在我的情况下，按钮位于导航栏内。请参阅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>问题是，搜索图标没有在 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

您可以检查一下（全屏查看）

#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>

Answer 4

您可以通过调整代码中搜索 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>