Aligner icône du matériau avec le texte sur Matérialiser

Récemment, j'ai commencé à travailler sur un projet qui contient une table avec des champs, et je tiens à ajouter un peu de Matériel Icônes du Design creux MaterializeCSS sur le côté des icônes. Regardez l'image et vous pourriez obtenir

:Aligner icône du matériau avec le texte sur Matérialiser

J'ai tout essayé, vertical align, soit en ligne (bloc), flex, et tout ce que je pouvais trouver dans le débordement de la pile. Donc non, ce n'est pas un doublon, j'ai vraiment besoin d'aide.
Merci.

OriginalL'auteur MucaP | 2016-10-06

  1. 17

    J'ai eu le même problème pour le temps le plus long, mais a trouvé une solution qui a fonctionné pour moi. Tout d'abord, donner une classe personnalisée à l'icône que vous souhaitez pour le centre. Ensuite, ajoutez un fond vertical align et une taille de police qui correspond ou est plus petit que le texte, il est placé à côté. Aussi, ne pas spécifier la taille de l'icône dans l'icône d'un nom de classe. Laissez-moi savoir si cela fonctionne pour vous.

    CSS:

    .inline-icon {
   vertical-align: bottom;
   font-size: 18px !important;
}

    HTML:

    <p>"Your text goes here"<i class="inline-icon material-icons">warning</i></p>

    OriginalL'auteur darkknightsds

  2. 1

    Vous pouvez changer l'icône margin-top pour toute valeur POSITIVE ou NÉGATIVE pour l'aligner. Par exemple,

    <i class="material-icons" style="margin-top:-10px">info_outline</i>

    OriginalL'auteur samson teoh