编程 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 相关文章推荐

css3实现波纹特效、H5实现动态波浪效果

Jan 31 HTML / CSS

css3发光搜索表单分享

Apr 11 HTML / CSS

纯css3实现鼠标经过图片显示描述的动画效果

Sep 01 HTML / CSS

纯css3实现的竖形无限级导航

Dec 10 HTML / CSS

CSS3实现点击放大的动画实例代码

Feb 27 HTML / CSS

通过css3的filter滤镜改变png图片的颜色的示例代码

May 06 HTML / CSS

Html5中的桌面通知Notification的实现

Sep 25 HTML / CSS

HTML5新控件之日期和时间选择输入的实现代码

Sep 13 HTML / CSS

利用canvas实现图片压缩的示例代码

Jul 17 HTML / CSS

深入了解canvas在移动端绘制模糊的问题解决

Apr 30 HTML / CSS

Canvas在超级玛丽游戏中的应用详解

Feb 06 HTML / CSS

html+css实现文字折叠特效实例

Jun 02 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

php简单对象与数组的转换函数代码(php多层数组和对象的转换)

2011/05/18 PHP

PHP循环语句笔记(foreach,list)

2011/11/29 PHP

PHP中数组定义的几种方法

2013/09/01 PHP

PHP小白必须要知道的php基础知识(超实用)

2017/10/10 PHP

php实现的生成迷宫与迷宫寻址算法完整实例

2017/11/06 PHP

javascript显示选择目录对话框的代码

2008/11/10 Javascript

高效的表格行背景隔行变色及选定高亮的JS代码

2010/12/04 Javascript

js,jQuery 排序的实现代码,网页标签排序的实现,标签排序

2011/04/27 Javascript

Javascript 面向对象（一）(共有方法，私有方法，特权方法)

2012/05/23 Javascript

jQuery插件-jRating评分插件源码分析及使用方法

2012/12/28 Javascript

javascript中call和apply方法浅谈

2013/09/27 Javascript

JavaScript中的ArrayBuffer详细介绍

2014/12/08 Javascript

Javascript中With语句用法实例

2015/05/14 Javascript

深入解析桶排序算法及Node.js上JavaScript的代码实现

2016/07/06 Javascript

Angular.js中$resource高大上的数据交互详解

2017/07/30 Javascript

Vue组件开发之LeanCloud带图形校验码的短信发送功能

2017/11/07 Javascript

layui 富文本图片上传接口与普通按钮文件上传接口的例子

2019/09/23 Javascript

JS数组进阶示例【数组的几种函数用法】

2020/01/16 Javascript

Vue实现浏览器打印功能的代码

2020/04/17 Javascript

浅谈webpack构建工具配置和常用插件总结

2020/05/11 Javascript

微信小程序连接服务器展示MQTT数据信息的实现

2020/07/14 Javascript

[03:18]【TI9纪实】社区大触GL与木木

2019/08/25 DOTA

Python SVM(支持向量机)实现方法完整示例

2018/06/19 Python

Python实现定时执行任务的三种方式简单示例

2019/03/30 Python

修改 CentOS 6.x 上默认Python的方法

2019/09/06 Python

python 6.7 编写printTable()函数表格打印(完整代码)

2020/03/25 Python

布局和排版教程纯css3实现图片三角形排列

2014/10/17 HTML / CSS

澳大利亚Mocha官方网站：包、钱包、珠宝和配饰

2019/07/18 全球购物

大学生应聘推荐信范文

2013/11/19 职场文书

项目总经理岗位职责

2014/02/14 职场文书

平安校园建设方案

2014/05/02 职场文书

小学德育工作经验交流材料

2014/05/22 职场文书

个人遵守党的政治纪律情况对照检查材料思想汇报

2014/09/25 职场文书

2015年体育教学工作总结

2015/05/20 职场文书

创新创业项目计划书该怎样写？

2019/08/13 职场文书

Win11如何设置右键单击显示所有选项？Win11右键单击显示所有选项设置教程

2022/04/08 数码科技