ユニコード文字がボタンの中央に配置されない

Question

ボタンのユニコードを使用した後、ユニコード文字がボタンの中央（両方とも水平方向とも、水平方向に&）に正しく整列していないことがわかりました。私は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

。 btnルールは文字を中央に配置します。

.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

を使用したときに明らかにそのシンボルキャラクタはそのラインの垂直方向の中央にない、なぜこれが起こっているかわかりません。 （これは、しかし、水平方向の中央です）だからあなたはあなたが右の値を見つけるまでパディング底部と周りに試してみて：あなたの60pxにline-heightの設定

.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>