CSS3的 fit-content实现水平居中


Posted in HTML / CSS onSeptember 07, 2017

当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么你可以略过这篇文章,没用过的同学就继续了,我也是第一次看到这个属性,之前不知道这个属性更不用说使用了,原来这个CSS属性是用来水平居中的,fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;一起来看下代码吧。
 

在不设置宽度,并且元素中含用float:left情况下居中,先看一段代码:

CSS3的 fit-content实现水平居中

CSS3的 fit-content实现水平居中

如此这个导航是不会居中的,当我们通过设置fit-content加上margin来做到居中。

CSS3的 fit-content实现水平居中

目前这个属性只支持Chrome和Firefox浏览器,下面是居中的代码:

CSS3的 fit-content实现水平居中

总结

以上所述是小编给大家介绍的CSS3的 fit-content实现水平居中,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 #HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 #HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 #HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 #HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 #HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 #HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 #HTML / CSS
You might like
zend api扩展的php对象的autoload工具
2011/04/18 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python实现备份文件实例
2014/09/16 Python
python连接oracle数据库实例
2014/10/17 Python
Python中设置变量访问权限的方法
2015/04/27 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python序列操作之进阶篇
2016/12/08 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
多个应用共存的Django配置方法
2018/05/30 Python
Python中遍历列表的方法总结
2019/06/27 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
大型活动策划方案
2014/01/12 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
Nginx快速入门教程
2021/03/31 Servers