Comment centrer aligner une ICÔNE à l'intérieur d'un BOUTON dans Materialise css navbar?


Avocat

J'ai lu de nombreux articles sur SO sur la façon d'aligner au centre une ICÔNE à l'intérieur d'un BOUTON, mais aucun d'entre eux ne fonctionne pour mon cas, car dans mon cas, le BOUTON est à l'intérieur d'une barre de navigation.

Veuillez consulter le code dans jsfiddle , également collé dans le bloc de code ci-dessous.

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

Le problème est que, l'ICÔNE de recherche n'est pas centrée verticalement à l'intérieur de BUTTON, et j'ai essayé de nombreuses méthodes suggérées, aucune n'a fonctionné.

Veuillez aider!

entrez la description de l'image ici

Aymen TAGHLISSIA

Vous avez juste à ajouter line-height: 45pxà votre icon, depuis que vous avez ajouté le height:45px;à votre bouton, comme ceci:

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

Articles connexes


Comment centrer l'icône et le texte à l'intérieur d'un bouton?

Qwertiy Comment puis-je centrer l'icône et le texte à l'intérieur du bouton sans spécifier les tailles pour aligner les éléments? .ico { background: url(https://www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=32&d=identicon&r=PG); width: 32px;

Centrer un div à l'intérieur d'une grille CSS

Mike Tallerico J'apprends à écrire du HTML / CSS / JS et je crée des sites Web simulés pour apprendre au fur et à mesure. J'ai commencé à m'aventurer dans CSS Grid et j'ai du mal à aligner horizontalement et verticalement un élément dans une grille. Je trouve

Comment aligner un bouton à droite dans Materialise card-action

don_Mustache J'utilise Materialise et je dois aligner un bouton sur le côté droit de la carte dans l'action de la carte. Voici le code: <div class="card-action"> <a href="#" class="right">This is a link</a> </div> Voici le résultat: Si je supprime le, class

Aligner les éléments à l'intérieur d'un bouton

Vampire classique J'essaie d'aligner un triangle à côté du texte écrit dans un bouton en utilisant uniquement HTML et CSS. Pour ma vie, je me souviens comment. .room-info-btn { background-color: #FFA500; color: #fff; border-radius: 4px; padding: 5px 11

Comment centrer une image à l'intérieur d'un div?

Artem Z Comment centrer une image horizontalement à l'intérieur d'un div? En ce moment, l'image est à gauche, bien qu'elle doive être centrée. J'ai beaucoup essayé, y compris le positionnement, mais rien ne fonctionne. Voir le code ci-dessous. Je vous remercie

Comment centrer une table à l'intérieur d'un div?

marron26 Je veux que tous les éléments à l'intérieur de div soient centrés verticalement et horizontalement. Voici mon HTML : <!DOCTYPE html> <html> <head> <title>Login</title> </head> <body> <div class="login"> <form action="prosesLogin.php" method="post"

CSS - icône de positionnement à l'intérieur d'un bouton

MonkeyOnARock J'essaie d'ajouter une icône à l'intérieur d'un bouton. Le problème est que chaque fois que j'ajoute l'icône, cela change la forme du bouton (cela le rend plus haut et parfois plus large en fonction de la taille de l'icône), et cela désaligne le