1
votes

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

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, puisque dans mon cas, le BOUTON est à l'intérieur d'une barre de navigation.

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

html css materialize

1 commentaires

@avacado vérifie ma réponse, vérifie si cela aide.

4 Réponses :

1
votes

Il vous suffit d'ajouter line-height: 45px à votre icône , depuis que vous avez ajouté la 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>

2 commentaires

En effet ça marche! Je ne connaissais pas cette propriété line-height auparavant, alors pourquoi en avons-nous besoin dans mon cas?

il donne la hauteur de l'élément parent de votre icône à lui-même, afin qu'il puisse se centrer dedans, nous l'utilisons généralement uniquement pour les icônes dans les boutons.

1
votes

Vous pouvez le corriger en ajustant la marge du div de recherche dans votre code. J'espère que cela t'aides. Je l'ai corrigé dans votre 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>

0 commentaires

2
votes

si votre barre de navigation a une hauteur fixe, ce css est suffisant pour u https://jsfiddle.net/fw9cmaq6/ a>

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

si la hauteur n'est pas fixe, utilisez simplement ceci

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

3 commentaires

Oui, ça marche, mais pourriez-vous expliquer pourquoi cela pourrait fonctionner? J'essaie d'apprendre ce qui se passe dans les coulisses.

cela fonctionne parce que vous avez une hauteur fixe et avec une marge, vous changez sa position en 8px vers le haut. la marge est utilisée pour changer de position.

Ah je comprends maintenant. Alors cette solution n'est pas tout à fait généralisable, si la hauteur a changé.

1
votes

Vous pouvez vérifier ceci (Afficher en plein écran)

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

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

0 commentaires