编程 HTML / CSS

CSS3的 fit-content实现水平居中

Posted in HTML / CSS onSeptember 07, 2017

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

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

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

CSS3的 fit-content实现水平居中

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

CSS3的 fit-content实现水平居中

总结

以上所述是小编给大家介绍的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