编程 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属性使网站设计增强同时不消弱可用性

Aug 29 HTML / CSS

谈谈对css属性box-sizing的了解

Jan 04 HTML / CSS

HTML5 FormData 方法介绍以及实现文件上传示例

Sep 12 HTML / CSS

html Table 表头固定的实现

Jan 22 HTML / CSS

Html5游戏开发之乒乓Ping Pong游戏示例(二)

Jan 21 HTML / CSS

HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦

Apr 25 HTML / CSS

HTML5 画布canvas使用方法

Mar 18 HTML / CSS

详解HTML5 录音的踩坑之旅

Dec 26 HTML / CSS

移动端html5模拟长按事件的实现方法

Sep 30 HTML / CSS

详解webapp页面滚动卡顿的解决办法

Dec 26 HTML / CSS

详解HTML5常用的语义化标签

Sep 27 HTML / CSS

前端使用canvas生成盲水印的加密解密的实现

Dec 16 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

ci检测是ajax还是页面post提交数据的方法

2014/11/10 PHP

HTML中嵌入PHP的简单方法

2016/02/16 PHP

PHP 二维数组和三维数组的过滤

2016/03/16 PHP

PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例

2017/05/17 PHP

php 函数中静态变量使用的问题实例分析

2020/03/05 PHP

javascript this用法小结

2008/12/19 Javascript

实现变速回到顶部的JavaScript代码

2011/05/09 Javascript

jQuery当鼠标悬停时放大图片的效果实例

2013/07/03 Javascript

浮动的div自适应居中显示的js代码

2013/12/23 Javascript

IE下支持文本框和密码框placeholder效果的JQuery插件分享

2015/01/31 Javascript

jQuery多级手风琴菜单实例讲解

2015/10/22 Javascript

jQuery CSS3相结合实现时钟插件

2016/01/08 Javascript

jQuery增加、删除及修改select option的方法

2016/08/19 Javascript

基于jQuery实现表格内容的筛选功能

2016/08/21 Javascript

详解ionic本地相册、拍照、裁剪、上传（单图完全版）

2017/10/10 Javascript

nodejs简单实现TCP服务器端和客户端的聊天功能示例

2018/01/04 NodeJs

Python入门及进阶笔记 Python 内置函数小结

2014/08/09 Python

Python入门_学会创建并调用函数的方法

2017/05/16 Python

python利用dir函数查看类中所有成员函数示例代码

2017/09/08 Python

Python实现爬虫从网络上下载文档的实例代码

2018/06/13 Python

python logging模块的使用

2020/09/07 Python

Python eval函数介绍及用法

2020/11/09 Python

Html5移动端div固定到底部实现底部导航条的几种方式

2021/03/09 HTML / CSS

Java编程面试题

2016/04/04 面试题

餐厅楼面主管岗位职责范本

2014/02/16 职场文书

年会主持词结束语

2014/03/27 职场文书

关于中国梦的演讲稿

2014/04/23 职场文书

保证书格式范文

2014/04/28 职场文书

2014年干部作风建设总结

2014/10/23 职场文书

新郎接新娘保证书

2015/05/08 职场文书

城南旧事电影观后感

2015/06/16 职场文书

2015年社区国庆节活动总结

2015/07/30 职场文书

CSS3通过var()和calc()函数实现动画特效

2021/03/30 HTML / CSS

Python Parser的用法

2021/05/12 Python

python可视化之颜色映射详解

2021/09/15 Python

Java获取字符串编码格式实现思路

2022/09/23 Java/Android