编程 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教程：background-clip和background-origin

Oct 17 HTML / CSS

IE矩阵Matrix滤镜旋转与缩放及如何结合transform

Nov 29 HTML / CSS

CSS实现的一闪而过的图片闪光效果

Apr 23 HTML / CSS

使用CSS3创建动态菜单效果

Jul 10 HTML / CSS

6种非常炫酷的CSS3按钮边框动画特效

Mar 16 HTML / CSS

html5 拖拽上传图片实例演示

Apr 01 HTML / CSS

html5教程调用绘图api画简单的圆形代码分享

Dec 04 HTML / CSS

html5中 media（播放器）的api使用指南

Dec 26 HTML / CSS

五个2015 年最佳HTML5 框架

Nov 11 HTML / CSS

HTML5中的音频和视频媒体播放元素小结

Jan 29 HTML / CSS

浅谈html5增强的页面元素

Jun 14 HTML / CSS

CSS 实现磨砂玻璃(毛玻璃)效果样式

May 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

PHP新手上路（十一）

2006/10/09 PHP

Php获取金书网的书名的实现代码

2010/06/11 PHP

PHP CURL获取返回值的方法

2014/05/04 PHP

浅析PHP关键词替换的类(避免重复替换，保留与还原原始链接)

2015/09/22 PHP

PHP基于ORM方式操作MySQL数据库实例

2017/06/21 PHP

Javascript 遍历对象中的子对象

2009/07/03 Javascript

jQuery ui 1.7更新小结

2009/08/15 Javascript

jQuery1.6 正式版发布并提供下载

2011/05/05 Javascript

js的延迟执行问题分析

2014/06/23 Javascript

laytpl 精致巧妙的JavaScript模板引擎

2014/08/29 Javascript

js验证真实姓名与身份证号是否匹配

2015/10/13 Javascript

js操作cookie保存浏览记录的方法

2015/12/25 Javascript

jQuery实现产品对比功能附源码下载

2016/08/09 Javascript

你知道setTimeout是如何运行的吗?

2016/08/16 Javascript

jquery获取点击控件的绝对位置简单实例

2016/10/13 Javascript

JavaScript队列的应用实例详解【经典数据结构】

2017/04/12 Javascript

JavaScript使用prototype原型实现的封装继承多态示例

2018/08/31 Javascript

Python 分析Nginx访问日志并保存到MySQL数据库实例

2014/03/13 Python

解决python2.7 查询mysql时出现中文乱码

2016/10/09 Python

python使用fork实现守护进程的方法

2017/11/16 Python

Django组件cookie与session的具体使用

2019/06/05 Python

Python实现串口通信（pyserial）过程解析

2019/09/25 Python

Python如何获取文件路径/目录

2020/09/22 Python

PyCharm最新激活码PyCharm2020.2.3有效

2020/11/18 Python

一款基于css3麻将筛子3D翻转特效的实例教程

2014/12/31 HTML / CSS

简历自我评价怎么写呢？

2014/01/06 职场文书

接待员岗位责任制

2014/02/10 职场文书

篮球社团活动总结

2014/06/27 职场文书

雷峰塔导游词

2015/02/09 职场文书

公司表扬稿范文

2015/05/05 职场文书

学生党支部工作总结2015

2015/05/26 职场文书

请假条应该怎么写？

2019/06/24 职场文书

导游词之神仙居景区

2019/11/15 职场文书

mysql连接查询中and与where的区别浅析

2021/07/01 MySQL

通过shell脚本对mysql的增删改查及my.cnf的配置

2021/07/07 MySQL

Python实现为PDF去除水印的示例代码

2022/04/03 Python