Herstellung Text erscheint in der Mitte einer Taste

Question

Wenn ich

<button id="kh_send_comment"> 
    <i class="material-icons">done</i> 
    Save 
</button> 

die Position des Wortes verwende Save auf der Unterseite der Taste ist. Ich möchte, dass es mitten drin ist. Wie kann ich das tun, ohne die Schriftgröße zu ändern?

https://jsfiddle.net/ba3vg9k8/

Answer 1

verwenden CSS:

button i { vertical-align: middle } 

https://jsfiddle.net/bgr3a1oL/1/

Answer 2

vertical-align: middle; In das i Element.

Answer 3

Der Grund dafür ist, dass die Schaltfläche das größere Symbol umschließt, wodurch die Höhe des Buttons erhöht wird und der Text den unteren Rand berührt.

Sie können dem Symbol einen festgelegten Pixelwert für das Symbol vertical-align geben, um den Text genau dorthin zu bringen, wo Sie es haben möchten.

button i { vertical-align: -7px }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 
<button id="kh_send_comment"><i class="material-icons">done</i> Save</button>