CODEWITHSUNDEEP
htmlcssmaterialize
avocado
avocado

Reputation: 2735

How to center align an ICON inside a BUTTON in materialize css navbar?

I read many post on SO about how to center align an ICON inside a BUTTON, but none of them work for my case, since in my case the BUTTON is inside a navbar.

Please see the code in jsfiddle, also pasted in the code block below.

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

The issue is that, the search ICON is not vertically centered inside BUTTON, and I tried many suggested methods, none worked.

Please help!

enter image description here

Upvotes: 1

Views: 1161

Answers (4)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17570

if your navbar has fixed height this CSS is enough for you https://jsfiddle.net/fw9cmaq6/

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

if not fixed height just use this

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

Upvotes: 3

Manjuboyz
Manjuboyz

Reputation: 7066

You can check this(View in full screen)

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

Upvotes: 1

927tanmay
927tanmay

Reputation: 136

You can fix it by adjusting the margin for the search div in your code. Hope this helps. I have fixed it in your code. 

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

Upvotes: 1

Aymen TAGHLISSIA
Aymen TAGHLISSIA

Reputation: 1925

You have just to add line-height: 45px to your icon , scince you added the height:45px; to your button , just like this : 

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

Upvotes: 1

Related Questions