编程 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动画和opacity透明度实现呼吸灯效果

Aug 09 HTML / CSS

css3 利用transform打造走动的2D时钟

Oct 20 HTML / CSS

利用简洁的图片预加载组件提升html5移动页面的用户体验

Mar 11 HTML / CSS

HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）

Jan 05 HTML / CSS

详解使用canvas保存网页为pdf文件支持跨域

Nov 23 HTML / CSS

实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

Nov 05 HTML / CSS

html5使用canvas绘制一张图片

Dec 15 HTML / CSS

HTML5 audio标签使用js进行播放控制实例

Apr 24 HTML / CSS

HTML5利用约束验证API来检查表单的输入数据的代码实例

Dec 20 HTML / CSS

html5组织内容_动力节点Java学院整理

Jul 10 HTML / CSS

浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同

Jun 04 HTML / CSS

纯html+css实现Element loading效果

Aug 02 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生成自定义长度随机字符串的函数分享

2014/05/04 PHP

php计划任务之ignore_user_abort函数实现方法

2015/01/08 PHP

PHP SESSION机制的理解与实例

2019/03/22 PHP

javascript向flash swf文件传递参数值注意细节

2012/12/11 Javascript

jQuery中(function($){})(jQuery)详解

2015/07/15 Javascript

jQuery实现可展开合拢的手风琴面板菜单

2015/09/15 Javascript

JS与jQuery遍历Table所有单元格内容的方法

2015/12/07 Javascript

JavaScript构造函数详解

2015/12/27 Javascript

解析Node.js基于模块和包的代码部署方式

2016/02/16 Javascript

Zabbix添加Node.js监控的方法

2016/10/20 Javascript

JS实现的DIV块来回滚动效果示例

2017/02/07 Javascript

JS操作时间 - UNIX时间戳的简单介绍(必看篇)

2017/08/16 Javascript

浅谈箭头函数写法在ReactJs中的使用

2017/08/22 Javascript

ui-router中使用ocLazyLoad和resolve的具体方法

2017/10/18 Javascript

Vuex 快速入门(简单易懂)

2018/09/20 Javascript

微信小程序实现单列下拉菜单效果

2019/04/25 Javascript

JS中数组实现代码(倒序遍历数组,数组连接字符串)

2019/12/29 Javascript

浅谈JavaScript窗体Window.ShowModalDialog使用

2020/07/22 Javascript

python批量下载图片的三种方法

2013/04/22 Python

Python3中简单的文件操作及两个简单小实例分享

2017/06/18 Python

Linux(Redhat)安装python3.6虚拟环境(推荐)

2018/05/05 Python

python设置值及NaN值处理方法

2018/07/03 Python

Python批处理删除和重命名文件夹的实例

2018/07/11 Python

使用Python求解带约束的最优化问题详解

2020/02/11 Python

Python3.7 读取音频根据文件名生成脚本的代码

2020/04/07 Python

解析python 中/ 和 % 和 //（地板除）

2020/06/28 Python

python利用文件时间批量重命名照片和视频

2021/02/09 Python

css3的过滤效果简单实例

2016/08/03 HTML / CSS

JD Sports澳洲官网：英国领先的运动鞋和运动时尚零售商

2020/02/15 全球购物

培训主管岗位职责

2014/02/01 职场文书

观看《永远的雷锋》心得体会

2014/03/12 职场文书

五四演讲稿范文

2014/09/03 职场文书

事业单位个人总结

2015/02/12 职场文书

水知道答案观后感

2015/06/08 职场文书

护士岗位竞聘书

2015/09/15 职场文书

礼貌问候语大全

2015/11/10 职场文书