fit-content實現元素水準居中

php中世界最好的语言
發布: 2018-03-21 13:18:38
原創
1759 人瀏覽過

這次帶給大家fit-content實現元素水平居中,fit-content實現元素水平居中的注意事項有哪些,下面就是實戰案例,一起來看一下。

當我們讓一個模組水平居中首先想到的肯定是margin:0 auto;有木有?那今天要跟大家介紹一個fit-content屬性,我不知道有沒有同學用過,如果用過那麼你可以略過這篇文章,沒用過的同學就繼續了,我也是第一次看到這個屬性,之前不知道這個屬性更不用說使用了,原來這個CSS屬性是用來水平居中的,fit-content是CSS3中給width屬性新加的一個屬性值,它配合margin可以讓我們輕鬆的實現水平居中的效果;一起來看下代碼吧。

在不設定寬度,且元素中含用float:left情況下居中,先看一段程式碼:

如此這個導航是不會居中的,當我們透過設定fit-content加上margin來做到居中。

目前這個屬性只支援Chrome和Firefox瀏覽器,以下是居中的程式碼:

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

css3的pointer-events使用詳解

完全利用CSS實作元素居中

font-size-adjust屬性如何最佳化網頁排版

以上是fit-content實現元素水準居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!