CSS中的圖標(biāo)垂直居中看似簡單,但實(shí)際上卻是一個需要注意細(xì)節(jié)的問題。為了讓圖標(biāo)垂直居中,我們需要在容器元素上使用一些CSS技巧。
.container { display: flex; align-items: center; }
上面的代碼中,我們給容器元素設(shè)置了display:flex和align-items:center。這樣就可以讓容器元素中的子元素垂直居中。
如果要讓文本與圖標(biāo)同時垂直居中,可以使用vertical-align屬性:
.container { display: flex; align-items: center; } .icon, .text { display: inline-block; vertical-align: middle; }
在上面的代碼中,我們給子元素設(shè)置了display:inline-block和vertical-align:middle。這樣就可以讓文本和圖標(biāo)同時垂直居中了。
還有一種方法可以讓圖標(biāo)垂直居中,那就是使用line-height屬性:
.container { line-height:50px; } .icon { vertical-align:middle; }
在上面的代碼中,我們給容器元素設(shè)置了line-height屬性,并將其值設(shè)置為與容器高度相同的值。然后再給圖標(biāo)設(shè)置vertical-align:middle,這樣就可以讓圖標(biāo)垂直居中了。
上一篇css3彈出框代碼
下一篇css3弧線滑動樣式