编程 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 border-radius属性详解

Jul 05 HTML / CSS

css3弹性盒模型实例介绍

May 27 HTML / CSS

纯css3显示隐藏一个div特效的具体实现

Feb 10 HTML / CSS

Grid 宫格常用布局的实现

Jan 10 HTML / CSS

css3实现书本翻页效果的示例代码

Mar 08 HTML / CSS

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

Jan 11 HTML / CSS

教你如何一步一步用Canvas写一个贪吃蛇

Oct 22 HTML / CSS

HTML5的标签的代码的简单介绍 HTML5标签的简介

May 28 HTML / CSS

html5使用canvas实现弹幕功能示例

Sep 11 HTML / CSS

浅谈HTML5 FileReader分布读取文件以及其方法简介

Nov 09 HTML / CSS

canvas里面如何基于随机点绘制一个多边形的方法

Jun 13 HTML / CSS

使用 CSS 构建强大且酷炫的粒子动画效果

Aug 14 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

15个小时----从修改程序到自己些程序

2006/10/09 PHP

PHP学习笔记之二

2011/01/17 PHP

zf框架的zend_cache缓存使用方法(zend框架)

2014/03/14 PHP

PHP查询附近的人及其距离的实现方法

2016/05/11 PHP

javascript firefox兼容ie的dom方法脚本

2008/05/18 Javascript

javascript 全等号运算符使用说明

2010/05/31 Javascript

基于jQuery的仿flash的广告轮播代码

2010/11/04 Javascript

js jquery获取随机生成id的服务器控件的三种方法

2013/07/11 Javascript

node.js中的console.dir方法使用说明

2014/12/10 Javascript

jQuery 处理页面的事件详解

2015/01/20 Javascript

js+CSS实现弹出居中背景半透明div层的方法

2015/02/26 Javascript

javascript常用函数（2）

2015/11/05 Javascript

JavaScript Math.round() 方法

2015/12/18 Javascript

微信小程序底部导航栏目开发资料

2016/12/05 Javascript

JavaScript实现三级联动菜单效果

2017/08/16 Javascript

vue watch自动检测数据变化实时渲染的方法

2018/01/16 Javascript

nuxt中使用路由守卫的方法步骤

2019/01/27 Javascript

Vue事件修饰符native、self示例详解

2019/07/09 Javascript

jQuery插件实现图片轮播效果

2020/10/19 jQuery

python使用7z解压apk包的方法

2015/04/18 Python

Python 查找list中的某个元素的所有的下标方法

2018/06/27 Python

CentOS7安装Python3的教程详解

2019/04/10 Python

如何通过50行Python代码获取公众号全部文章

2019/07/12 Python

Python在OpenCV里实现极坐标变换功能

2019/09/02 Python

python3中datetime库，time库以及pandas中的时间函数区别与详解

2020/04/16 Python

基于jupyter代码无法在pycharm中运行的解决方法

2020/04/21 Python

python导入库的具体方法

2020/06/18 Python

HTML5里autofocus自动聚焦属性使用介绍

2016/06/22 HTML / CSS

Html5+JS实现手机摇一摇功能

2015/04/24 HTML / CSS

应届行政管理专业个人自我评价

2013/12/28 职场文书

计算机专业毕业生自我鉴定

2014/01/16 职场文书

青年教师培训方案

2014/02/06 职场文书

理发店策划方案

2014/06/05 职场文书

2015年教师国培感言

2015/08/01 职场文书

Redis 常见使用场景

2021/08/30 Redis

关于SpringBoot 使用 Redis 分布式锁解决并发问题

2021/11/17 Redis