牆壁彩繪 / Lin.mo 里莫彩繪事務所 , 藝術設計,

css font icon 完美置中 此例搭配 Font Awesome

若是採用自製 icon 你可以利用背景圖片 在設定背景上下左右置中

如 background: url(../images/icon.svg) no-repeat center center;

但是如果搭配icon字型就沒這麼容易了, 一般來說初學者會想到的方式

可能是以下這樣：

範例 <a href="/contact" class="mail"><i class="fas fa-envelope"></i></a>

設定寬高之後在用padding-top 設定適當的內距

text-align: center;
color: #fff;
background:#000;
border-radius: 100%;
padding-top:(適當的值);
width: 45px;
height: 45px;

這樣子的做法並沒有不對 , 若是發生在css2的狀況下
可能也只有這種方式可以達到 icon完美置中

但如果客戶要求你改變icon大小 , 那很明白的,你又得重新設定padding-top的值
 

筆者今天分享一種做法,你不需要設定任何padding,就可以達到最完美的置中
而且不論你的寬高怎麼變,都不會受到影響

首先一樣的html 
<a href="/contact" class="mail"><i class="fas fa-envelope"></i></a>

基本的css 
color: #fff;
background:#000;
border-radius: 100%;
width: 45px;
height: 45px;

另外我們在a標籤的樣式裡頭加上這兩個屬性
display: flex;
align-items: center;

這兩個屬性加起來可以讓a標籤裡頭的html元素達到垂直置中
像是這樣...

接著你必須在a標籤裡元素加上 margin: auto; (一定要這個才行 text-align: center; 是無作用的)
接下來就是採收結果的時刻了

 

以上方式與大家分享！