圖片垂直居中的使用技巧
在曾經(jīng)的淘寶UED 招聘 中有這樣一道題目：
“使用純CSS實(shí)現(xiàn)未知尺寸的圖片(但高寬都小于0px)在0px的正方形容器中水平和垂直居中�！�
當(dāng)然出題并不是隨意，而是有其現(xiàn)實(shí)的原因，垂直居中是 淘寶 工作中最常遇到的一個(gè)問題，很有代表性。
題目的難點(diǎn)在于兩點(diǎn)：
垂直居中；
圖片是個(gè)置換元素，有些特殊的特性。
至于如何解決，下面是一個(gè)權(quán)衡的相對(duì)結(jié)構(gòu)干凈，CSS簡(jiǎn)單的解決方法：
以下為引用的內(nèi)容：.box {/*非IE的主流瀏覽器識(shí)別的垂直居中的方法*/display: table-cell;vertical-align:middle;
/*設(shè)置水平居中*/text-align:center;
/* 針對(duì)IE的Hack */*display: block;*font-size: 175px;/*約為高度的0.873，0*0.873 約為175*/*font-family:Arial;/*防止非utf-8引起的hack失效問題，如gbk編碼*/
width:0px;height:0px;border: 1px solid #eee;}.box img {/*設(shè)置圖片垂直居中*/vertical-align:middle;}
- TEL：131 7970 3111
-
慧網(wǎng)微信
- 掃描二維碼
- 關(guān)注邳州在線
-
手機(jī)網(wǎng)站
- 手機(jī)掃描二維碼
- 進(jìn)入手機(jī)站
網(wǎng)站地圖
付款方式