编程 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 相关文章推荐

利用CSS的Sass预处理器（框架）来制作居中效果

Mar 10 HTML / CSS

CSS3 实现弹跳的小球动画

Oct 26 HTML / CSS

突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述

Jan 31 HTML / CSS

基于Modernizr 让网站进行优雅降级的分析

Apr 21 HTML / CSS

HTML中使用SVG与SVG预定义形状元素介绍

Jun 28 HTML / CSS

HTML5在a标签内放置块级元素示例代码

Aug 23 HTML / CSS

html5图片上传预览示例分享

Apr 14 HTML / CSS

详解canvas多边形(蜘蛛图)的画法示例

Jan 29 HTML / CSS

HTML常用标签超详细整理

Mar 19 HTML / CSS

CSS 左边固定宽右边自适应的6种方法

May 15 HTML / CSS

前端使用svg图片改色实现示例

Jul 23 HTML / CSS

css清除浮动clearfix:after的用法详解（附完整代码）

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

咖啡机如何保养和日常清洁？

2021/03/03 冲泡冲煮

php 随机生成10位字符代码

2009/03/26 PHP

php流量统计功能的实现代码

2012/09/29 PHP

WordPres对前端页面调试时的两个PHP函数使用小技巧

2015/12/22 PHP

CI框架集成Smarty的方法分析

2016/05/17 PHP

模仿jQuery each函数的链式调用

2009/07/22 Javascript

javascript先序遍历DOM树的方法

2016/02/27 Javascript

JavaScript性能优化总结之加载与执行

2016/08/11 Javascript

js实现table添加行tr、删除行tr、清空行tr的简单实例

2016/10/15 Javascript

JavaScript面试题(指针、帽子和女朋友)

2016/11/23 Javascript

nodejs的压缩文件模块archiver用法示例

2017/01/18 NodeJs

jQuery移除或禁用html元素点击事件常用方法小结

2017/02/10 Javascript

js中作用域的实例解析

2017/03/16 Javascript

vue.js 微信支付前端代码分享

2018/02/10 Javascript

微信小程序实现复选框效果

2018/12/28 Javascript

微信小程序使用canvas自适应屏幕画海报并保存图片功能

2019/07/25 Javascript

layui禁用侧边导航栏点击事件的解决方法

2019/09/25 Javascript

用Python一键搭建Http服务器的方法

2018/06/01 Python

在双python下设置python3为默认的方法

2018/10/31 Python

pytorch permute维度转换方法

2018/12/14 Python

python处理大日志文件

2019/07/23 Python

Python序列类型的打包和解包实例

2019/12/21 Python

python3中sys.argv的实例用法

2020/04/24 Python

Python通过format函数格式化显示值

2020/10/17 Python

AmazeUI的JS表单验证框架实战示例分享

2020/08/21 HTML / CSS

世界上最全面的草药补充剂和顶级品牌维生素网站：HerbsPro

2019/01/20 全球购物

编辑找工作求职信分享

2014/01/03 职场文书

房地产促销活动方案

2014/03/01 职场文书

工作失误检讨书（经典集锦版）

2014/10/17 职场文书

个人收入证明范本

2015/06/12 职场文书

军训结束新闻稿

2015/07/17 职场文书

python爬取新闻门户网站的示例

2021/04/25 Python

Python竟然能剪辑视频

2021/05/25 Python

使用 Apache Superset 可视化 ClickHouse 数据的两种方法

2021/07/07 Servers

详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)

2021/11/27 Vue.js

Nginx 匹配方式

2022/05/15 Servers