如何在物化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{&nbsp;margin-top:-8px;}如果没有固定高度就用这个.material-icons{&nbsp; display: table-cell !important;&nbsp; vertical-align: middle;&nbsp; line-height:0 !important;&nbsp; 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">&nbsp; <nav class="teal">&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <div class="nav-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="brand-logo">LOGO </a>&nbsp; &nbsp; &nbsp; &nbsp; <ul class="right hide-on-med-and-down">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form class="orange" style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="display: inline-flex; border: 1px black solid; align-items: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn" type="submit" style="background: blue; height:45px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="material-icons" style="border: 1px red solid; display: inline; margin: auto;line-height:45px;">search</i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#home">Home</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </nav></div>

Answer 3

您可以检查一下（全屏查看）#container {&nbsp; height: 65px;&nbsp; display: flex;}#search-bar {&nbsp; height: 100%;}button.btn {&nbsp; height: auto !important;}.material-icons {&nbsp; vertical-align: middle;&nbsp; justify-content: center;&nbsp; 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">&nbsp; <nav class="teal">&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <div class="nav-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="brand-logo">LOGO </a>&nbsp; &nbsp; &nbsp; &nbsp; <ul class="right hide-on-med-and-down">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form class="orange">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="search-bar" type="search" placeholder="text text...">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn" type="submit" style="background: blue; height:45px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="material-icons">search</i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#home">Home</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </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">&nbsp; <nav class="teal">&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <div class="nav-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="brand-logo">LOGO </a>&nbsp; &nbsp; &nbsp; &nbsp; <ul class="right hide-on-med-and-down">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form class="orange" style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="display: inline-flex; border: 1px black solid; align-items: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn" type="submit" style="background: blue; height:45px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="margin-top: -9px;">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="material-icons" style="border: 1px red solid; display: inline; ">search</i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#home">Home</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </nav></div>