Создание текста появляется в середине кнопки

Question

Когда я использую

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

позиции слова Save находится на нижней части кнопки. Я бы хотел, чтобы он был посредине этого. Как я могу это сделать без изменения размера шрифта?

https://jsfiddle.net/ba3vg9k8/

Answer 1

Используйте этот CSS:

button i { vertical-align: middle } 

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

Answer 2

Добавить vertical-align: middle; в i элемента.

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>