Unicode-Zeichen wird nicht auf die Mitte der Schaltfläche ausgerichtet

Question

Nachdem ich einen Unicode für eine Schaltfläche verwendet habe, habe ich festgestellt, dass das Unicode-Zeichen nicht richtig auf die Mitte (beide horizontal & vertikal) der Schaltfläche ausgerichtet ist. Ich bin mir nicht sicher, warum dies geschieht, wenn ich verwenden padding: 0;

.btn{ 
 
    background-color: #868f98; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 20%; 
 
    border: none; 
 
    outline: none; 
 
    color: #FFF; 
 
    padding: 0; 
 
    font-size: 2em; 
 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
 
}

<button class="btn">&#9776;</button>

Answer 1

Einstellung line-height zu 60px auf. btn Regel wird das Zeichen zentrieren.

.btn{ 
 
    background-color: #868f98; 
 
    width: 60px; 
 
    height: 60px; 
 
    line-height: 60px; 
 
    border-radius: 20%; 
 
    border: none; 
 
    outline: none; 
 
    color: #FFF; 
 
    padding: 0; 
 
    font-size: 2em; 
 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
 
}

<button class="btn">&#9776;</button>

Answer 2

offenbar, dass Symbolzeichen nicht in der vertikalen Mitte der Linie ist. (Es ist horizontal zentriert, obwohl) Also man muss nur mit einem padding-bottom versuchen, bis Sie den richtigen Wert finden:

.btn{ 
 
box-sizing: border-box; 
 
vertical-align: middle; 
 
    background-color: #868f98; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 20%; 
 
    border: none; 
 
    outline: none; 
 
    color: #FFF; 
 
    padding: 0 0 0.24em 0; 
 
    font-size: 2em; 
 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
 
}

<button class="btn">&#9776;</button>