[CSS文字垂直置中]行高(Line-Height)的妙用

當我們在使用CSS語法中的這個Line-Height(行高/行距)這個指令時,
大多是用來設定一個文字段落中,行與行之間的距離,
讓每一行的文字都能有些間距,
不至於太過擁擠,
不易閱讀。
 
不過行高/行距(Line-Height)除了設定換行文字的間距外,
還有一個妙用,
就是在某些特定的情境下,
可以非常簡單的就讓單行文字垂直置中。
 
什麼意思呢?
舉例來說好了,我們在網頁上弄了一個選單列,
假設這個選單列我們希望他高度能有46px,
裡面有幾個文字連結,文字大小為12級,
看起來會像是下面這樣:

嗯~糟糕,文字連結都往上對齊了,看起來很討厭。
 
很多朋友這個時候就會用Padding來做微調,
但是用Padding或Margin來調整,
又很容易產生不同瀏覽器之間相容的問題,導致要垂直置中變的有點麻煩。
 
這時候行高/行距的妙用就來了,
只要設定行高/行距跟區塊的高度一樣,那麼其他都不用設定,
區塊中的文字自然就會垂直置中了,
更新了 Line-Height 後會像下面這樣:

 
如果是做成一個圓形(現在倒是流行呢),那更是方便:
 

Readers comment