創建一個正方形按鈕的最小規則，正好位於中心的一個字母

Question

當搭配創建一個由單個字母/字形組成的按鈕時，如何垂直對齊以使字母恰好位於其父母的中心。

鏈接FIDDLE

div { 
 
    width: 2em; 
 
    height: 2em; 
 
    background: gray; 
 
    text-align: center; 
 
    line-height: 2em; 
 
}

<div>⬛</div>or 
 
<div>@</div>or 
 
<div>g</div>

Answer 1

你可以試試這個：

<div>g</div> 

div{ 
width: 1em; 
height: 1em; 
text-align: center; 
background: gray; 
padding: 5px 10px 10px 10px;} 

調整填充在頂部或底部。 https://jsfiddle.net/5vwh46f8/

Answer 2

添加與高度相等的行高。

div { 
    width: 1.2em; 
    height: 1.2em; 
    border: solid thin; 
    text-align: center; 

    line-height: 1.2em; 
} 

這樣，廣場正好在中心。如果字形高或大寫，或者它是帶有下降的字母（如y），則其他字母可能略微偏離中心，但它看起來很自然。

Answer 3

有沒有單規則可以做到這一點。

一些字符字形，這樣在那些像y和g伸根本就沒有集中在他們的「邊框」。同樣，即使您想出了一種以一種字體爲中心的一致方法，即使在相同的字體大小下，也不會轉換爲第二種/備用字體/字體。

.wrap div { 
 
    width: 1.2em; 
 
    height: 1.2em; 
 
    line-height: 1.2em; 
 
    border: solid thin; 
 
    text-align: center; 
 
    font-size: 72px; 
 
} 
 
.wrap { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-right: 1em; 
 
} 
 
.times { 
 
    font-family: "Verdana"; 
 
} 
 
.calibri { 
 
    font-family: "calibri"; 
 
}

<div class="wrap times"> 
 
    <div>⬛</div>or 
 
    <div>@</div>or 
 
    <div>g</div>or 
 
    <div>~</div> 
 
</div> 
 

 
<div class="wrap calibri"> 
 
    <div>⬛</div>or 
 
    <div>@</div>or 
 
    <div>g</div>or 
 
    <div>~</div> 
 
</div>