web-dev-qa-db-fra.com

Aligner l'icône du matériau avec le texte sur Materialise

Récemment, j'ai commencé à travailler sur un projet qui contient une table avec quelques champs, et je veux ajouter quelques icônes de conception de matériaux via MaterializeCSS sur le côté des icônes. Regardez l'image et vous pourriez l'obtenir

: example

J'ai tout essayé, alignement vertical, inline (-block), flex et tout ce que j'ai pu trouver dans le débordement de pile. Donc non, ce n'est pas un doublon, j'ai vraiment besoin d'aide. Je vous remercie.

cssiconsmaterializegoogle-material-icons
13
MucaP

C'est une façon de le faire. Bien sûr, cela dépend de l'icône, vous devez trouver le font-size Spécifique qui s'adaptera à la hauteur de l'icône. Exemples:

#txt1{
 font-size:28px;
 line-height:24px;
}
#txt2{
 font-size:36px;
 line-height:24px;
}
#txt3{
 font-size:21px;
 line-height:24px;
}
.material-icons{
    display: inline-flex;
    vertical-align: top;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="txt1">ID</span><i class="material-icons">info_outline</i>
</br>
<span id="txt2">ID</span><i class="material-icons">settings_cell</i>
</br>
<span id="txt3">ID</span><i class="material-icons">stay_primary_landscape</i>
12
Theodore K.

J'ai eu le même problème pendant la plus longue période mais j'ai trouvé une solution qui fonctionnait pour moi. Tout d'abord, donnez une classe personnalisée à l'icône que vous souhaitez centrer. Ensuite, ajoutez un alignement vertical inférieur et une taille de police qui correspond ou est inférieure au texte à côté duquel il est placé. De plus, ne spécifiez pas la taille de l'icône dans le nom de classe de l'icône. Faites-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>
23
darkknightsds

Vous pouvez changer l'icône margin-top en n'importe quelle valeur POSITIVE ou NEGATIVE pour l'aligner. Par exemple,

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

Ajustez simplement le vertical-align: en valeur négative.

exemple de code:

<i class="material-icons" style="vertical-align: -6px;">folder</i>
1
KirtJ

Facile:

vous pouvez simplement fusionner une autre classe ("à droite") avec elle:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="txt1">ID</span><i class="material-icons right">info_outline</i>
</br>
<span id="txt2">ID</span><i class="material-icons right">settings_cell</i>
</br>
<span id="txt3">ID</span><i class="material-icons right">stay_primary_landscape</i>

vous pouvez voir Word "à droite" dans la classe des icônes de matériaux.

0
VIRA

Vous pouvez effectuer les opérations suivantes dans le HTML:

<span>ID</span> <i class="material-icons">info</i>

Ensuite, dans le CSS, vous pouvez styliser classe material-icons comme suit:

.material-icons {
    diplay:inline-flex;
    vertical-align:top;
}
0
Mwiza