编程 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的方法

Aug 29 HTML / CSS

CSS3 icon font完全指南(CSS3 font 会取代icon图标)

Jan 06 HTML / CSS

CSS3之transition实现下划线的示例代码

May 30 HTML / CSS

CSS3实现时间轴特效

Nov 02 HTML / CSS

基于HTML5的WebSocket的实例代码

Aug 15 HTML / CSS

HTML5 Canvas+JS控制电脑或手机上的摄像头实例

May 03 HTML / CSS

整理HTML5的一些新特性与Canvas的常用属性

Jan 29 HTML / CSS

HTML5新增属性data-*和js/jquery之间的交互及注意事项

Aug 08 HTML / CSS

总结html5自定义属性有哪些

Apr 01 HTML / CSS

html+css实现滚动到元素位置显示加载动画效果

Aug 02 HTML / CSS

sass 常用备忘案例详解

Sep 15 HTML / CSS

HTML基础详解（下）

Oct 16 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中使用Sockets 从Usenet中获取文件

2008/01/10 PHP

我的php学习笔记(毕业设计)

2012/02/21 PHP

ThinkPHP基本的增删查改操作实例教程

2014/08/22 PHP

PHP中feof()函数实例测试

2014/08/23 PHP

Zend Framework教程之模型Model用法简单实例

2016/03/04 PHP

thinkPHP微信分享接口JSSDK用法实例

2017/07/07 PHP

自动更新作用

2006/10/08 Javascript

JavaScript触发器详解

2007/03/10 Javascript

用JAVASCRIPT如何给&lt;textarea&gt;&lt;/textarea&gt;赋值

2007/04/20 Javascript

用js实现计算代码行数的简单方法附代码

2007/08/13 Javascript

js 数据类型转换总结笔记

2011/01/17 Javascript

E3 tree 1.6在Firefox下显示问题的修复方法

2013/01/30 Javascript

JQuery each()嵌套使用小结

2014/04/18 Javascript

jquery自定义插件开发之window的实现过程

2016/05/06 Javascript

JS产生随机数的几个用法详解

2016/06/22 Javascript

BootStrap 动态添加验证项和取消验证项的实现方法

2016/09/28 Javascript

Angular.js初始化之ng-app的自动绑定与手动绑定详解

2017/07/31 Javascript

微信小程序之数据缓存的实例详解

2017/09/29 Javascript

通过webpack引入第三方库的方法

2018/07/20 Javascript

vue删除html内容的标签样式实例

2018/09/13 Javascript

python中去空格函数的用法

2014/08/21 Python

Python 列表理解及使用方法

2017/10/27 Python

tensorflow建立一个简单的神经网络的方法

2018/02/10 Python

2分钟教你实现环形/扇形菜单(基础版)

2020/01/15 HTML / CSS

深入浅析HTML5中的article和section的区别

2018/05/15 HTML / CSS

解析浏览器的一些“滚动”行为鉴赏

2019/09/16 HTML / CSS

纽约21世纪百货官网：Century 21

2016/08/27 全球购物

健身场所或家用健身设备：Life Fitness

2017/11/01 全球购物

澳大利亚最好的在线时尚精品店：Princess Polly

2018/01/03 全球购物

Hunter Boots美国官方网站：赫特威灵顿雨靴

2018/06/16 全球购物

建筑专业自我鉴定

2013/10/22 职场文书

阳光体育活动实施方案

2014/05/25 职场文书

局领导领导班子四风对照检查材料

2014/09/27 职场文书

三八妇女节新闻稿

2015/07/17 职场文书

Promise面试题详解之控制并发

2021/05/14 面试题

element多个表单校验的实现

2021/05/27 Javascript