當(dāng)我們讓一個(gè)模塊水平居中首先想到的肯定是margin:0 auto;有木有？那么今天給大家介紹一個(gè)fit-content屬性，不知道有沒(méi)有同學(xué)用過(guò)，如果用過(guò)那么你可以略過(guò)這篇文章，沒(méi)用過(guò)的同學(xué)就繼續(xù)了，我也是第一次看到這個(gè)屬性，之前不知道這個(gè)屬性更不用說(shuō)使用了，原來(lái)這個(gè)CSS屬性是用來(lái)水平居中的，fit-content是CSS3中給width屬性新加的一個(gè)屬性值,它配合margin可以讓我們輕松的實(shí)現(xiàn)水平居中的效果;一起來(lái)看下代碼吧。
 

在不設(shè)置寬度，并且元素中含用float:left情況下居中,先看一段代碼:

如此這個(gè)導(dǎo)航是不會(huì)居中的，當(dāng)我們通過(guò)設(shè)置fit-content加上margin來(lái)做到居中。

目前這個(gè)屬性只支持Chrome和Firefox瀏覽器，下面是居中的代碼:

總結(jié)

以上所述是小編給大家介紹的CSS3的 fit-content實(shí)現(xiàn)水平居中，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論