首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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情况下居中,先看一段代码:

CSS3的 fit-content实现水平居中

CSS3的 fit-content实现水平居中

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

CSS3的 fit-content实现水平居中

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

CSS3的 fit-content实现水平居中

总结

以上所述是小编给大家介绍的CSS3的 fit-content实现水平居中，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

CSS3的 fit-content实现水平居中

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 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
调频(4) 收音机(62) 电台频率(32) KDKA(1) Harman Kardon(1) 立体声(1) 长波(3) 中波(3) 保养(1) ad hoc(1)
You might like
使用php验证复选框有效性的示例
2013/11/13 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
分享PHP守护进程类
2015/12/30 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JQuery基础语法小结
2015/02/27 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
详解Vue.js iview实现树形权限表（可扩展表）
2018/09/30 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
js实现简易计算器功能
2019/10/18 Javascript
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python制作刷网页流量工具
2017/04/23 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
通过Python实现一个简单的html页面
2020/05/16 Python
大学生优秀团员事迹材料
2014/01/30 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
滴水洞导游词
2015/02/10 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
关于感恩的作文
2019/08/26 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript