テキストスパンの内側が正しく配置されていません

Question

円のテキストが正しい位置に表示されません。特に垂直位置。それは縦と横の両方の中心にあると考えられています。それは変わらなければならない。

私はページの中央にボタンを取得しようとしています。他の2つの部門は後で記入されます。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: "Lato", sans-serif; 
 
}

<div style="background-color: grey; position: static;height: 80px"> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
\t <div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center"> 
 
\t \t <span style=" background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >&#9863;</span> 
 
\t </div> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
</div>

それはそう簡単な修正です。あなたの時間をありがとう。

Answer 1

この状況では、line-heightプロパティを使用して垂直方向の配置を調整できます。以下のスニペットを参照してください。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: "Lato", sans-serif; 
 
}

<div style="background-color: grey; position: static;height: 80px"> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
\t <div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center"> 
 
\t \t <span style="line-height:1.2; background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >&#9863;</span> 
 
\t </div> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
</div>