作るテキストはボタン

Question

の真ん中に表示されます。私はそれが真ん中にあることを願っています。フォントサイズを変更せずにこれを行うにはどうすればよいですか？

https://jsfiddle.net/ba3vg9k8/

Answer 1

このCSSを使用しますi要素にvertical-align: middle;を追加

button i { vertical-align: middle } 

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

Answer 2

を。

Answer 3

これは、ボタンが大きなアイコンを囲んでいるため、ボタンの高さが増え、テキストが下に抱きついてしまうためです。

アイコンの値をvertical-alignに設定すると、設定したピクセル値を使用して、必要な場所にテキストを正確に表示できます。

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>