编程 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弹性盒模型开发笔记（三）

Apr 26 HTML / CSS

使用CSS实现阅读进度条

Feb 27 HTML / CSS

图解CSS3制作圆环形进度条的实例教程

May 26 HTML / CSS

css3旋转木马_动力节点Java学院整理

Jul 12 HTML / CSS

HTML5实现表单自动验证功能实例代码

Jan 11 HTML / CSS

html5配合css3实现带提示文字的输入框(摆脱js)

Mar 08 HTML / CSS

HTML5语音识别标签写法附图

Nov 18 HTML / CSS

html5图片上传预览示例分享

Apr 14 HTML / CSS

HTML5 Convas APIs方法详解

Apr 24 HTML / CSS

HTML5 拖放功能实现代码

Jul 14 HTML / CSS

使用phonegap获取设备的一些信息方法

Mar 31 HTML / CSS

详解如何解决H5开发使用wx.hideMenuItems无效果不生效

Jan 20 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

substr()函数中文版

2006/10/09 PHP

Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解

2016/03/05 PHP

PHP提取字符串中的手机号正则表达式怎么写

2017/07/17 PHP

thinkPHP5框架auth权限控制类与用法示例

2018/06/12 PHP

php5.3/5.4/5.5/5.6/7常见新增特性汇总整理

2020/02/27 PHP

jquery 事件执行检测代码

2009/12/09 Javascript

使用Jquery来实现可以输入值的下拉选单雏型

2011/12/06 Javascript

利用Keydown事件阻止用户输入实现代码

2014/03/11 Javascript

有关JS中的0,null,undefined,[],{},'''''''',false之间的关系

2017/02/14 Javascript

Angular.js组件之input mask对input输入进行格式化详解

2017/07/10 Javascript

基于vue-simplemde实现图片拖拽、粘贴功能

2018/04/12 Javascript

vue实现动态显示与隐藏底部导航的方法分析

2019/02/11 Javascript

基于three.js实现的3D粒子动效实例代码

2019/04/09 Javascript

vue全屏事件开发详解

2020/06/17 Javascript

js+audio实现音乐播放器

2020/09/13 Javascript

vue+swiper实现左右滑动的测试题功能

2020/10/30 Javascript

Python标准库os.path包、glob包使用实例

2014/11/25 Python

Python中如何优雅的合并两个字典（dict）方法示例

2017/08/09 Python

详谈pandas中agg函数和apply函数的区别

2018/04/20 Python

python实现按长宽比缩放图片

2018/06/07 Python

使用python生成杨辉三角形的示例代码

2018/08/29 Python

Python中shapefile转换geojson的示例

2019/01/03 Python

python 读取数据库并绘图的实例

2019/12/03 Python

TensorFlow dataset.shuffle、batch、repeat的使用详解

2020/01/21 Python

python opencv圆、椭圆与任意多边形的绘制实例详解

2020/02/06 Python

Python面向对象程序设计之类和对象、实例变量、类变量用法分析

2020/03/23 Python

pytorch加载自己的图像数据集实例

2020/07/07 Python

CSS3属性 line-clamp控制文本行数的使用

2020/03/19 HTML / CSS

意大利拉斐尔时尚购物网：Raffaello Network（支持中文）

2018/11/09 全球购物

自我评价怎么写正确呢？

2013/12/02 职场文书

自荐书模板

2013/12/15 职场文书

药学专业学生的自我评价分享

2014/02/06 职场文书

硕士毕业论文导师评语

2014/12/31 职场文书

2015入党自传书范文

2015/06/26 职场文书

mybatis源码解读之executor包语句处理功能

2022/02/15 Java/Android

纯CSS实现一个简单步骤条的示例代码

2022/07/15 HTML / CSS