编程 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轻松实现清新 Loading 效果的简单实例

Jun 06 HTML / CSS

CSS3感应鼠标的背景闪烁和图片缩放动画效果

May 14 HTML / CSS

基础的CSS3弹性盒Flexbox布局使用实例

Apr 08 HTML / CSS

html5 Canvas画图教程(9)—canvas中画出矩形和圆形

Jan 09 HTML / CSS

HTML5的语法变化介绍

Aug 13 HTML / CSS

使用jquery实现HTML5响应式导航菜单教程

Apr 02 HTML / CSS

深入解析HTML5使用SVG图像时的viewBox属性用法

Sep 02 HTML / CSS

【HTML5】3D模型--百行代码实现旋转立体魔方实例

Dec 16 HTML / CSS

webView加载html图片遇到的问题解决

Oct 08 HTML / CSS

AmazeUI 网格的实现示例

Aug 13 HTML / CSS

AmazeUI 模态窗口的实现代码

Aug 18 HTML / CSS

CSS3实现360度循环旋转功能

Feb 12 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

AM/FM收音机的安装与调试

2021/03/02 无线电

如何使用动态共享对象的模式来安装PHP

2006/10/09 PHP

PHP微信网页授权的配置文件操作分析

2019/05/29 PHP

flash 得到自身url参数的代码

2009/11/15 Javascript

isArray()函数(JavaScript中对象类型判断的几种方法)

2009/11/26 Javascript

js 蒙版进度条（结合图片）

2010/03/10 Javascript

遍历DOM对象内的元素属性示例代码

2014/02/08 Javascript

jquery动态添加删除一行数据示例

2014/06/12 Javascript

使用jQuery的attr方法来修改onclick值

2014/07/07 Javascript

js实现简单的可切换选项卡效果

2015/04/10 Javascript

JavaScript prototype属性详解

2016/10/25 Javascript

Node.js如何响应Ajax的POST请求并且保存为JSON文件详解

2017/03/10 Javascript

Vue+Flask实现简单的登录验证跳转的示例代码

2018/01/13 Javascript

基于Node的Axure文件在线预览的实现代码

2019/08/28 Javascript

详解vuejs中执行npm run dev出现页面cannot GET/问题

2020/04/26 Javascript

微信小程序pinker组件使用实现自动相减日期

2020/05/07 Javascript

[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密

2014/07/08 DOTA

Python抓取Discuz!用户名脚本代码

2013/12/30 Python

Python中list初始化方法示例

2016/09/18 Python

使用numpy和PIL进行简单的图像处理方法

2018/07/02 Python

Python可变和不可变、类的私有属性实例分析

2019/05/31 Python

Python csv模块使用方法代码实例

2019/08/29 Python

django项目中新增app的2种实现方法

2020/04/01 Python

基于tensorflow __init__、build 和call的使用小结

2021/02/26 Python

德国著名廉价网上药店：Shop-Apotheke

2017/07/23 全球购物

香港交友网站：be2香港

2018/07/22 全球购物

如何高效率的查找一个月以内的数据

2012/04/15 面试题

安全检查与奖惩制度

2014/01/23 职场文书

节能环保口号

2014/06/12 职场文书

关于读书的活动方案

2014/08/14 职场文书

辩论会主持词

2015/07/03 职场文书

互联网创业商业模式以及赚钱法则有哪些？

2019/10/12 职场文书

解决thinkphp6(tp6)在状态码500下不报错，或者显示错误“Malformed UTF-8 characters”的问题

2021/04/01 PHP

Python list列表删除元素的4种方法

2021/11/01 Python

vscode内网访问服务器的方法

2022/06/28 Servers

JS前端使用canvas实现物体的点选示例

2022/08/05 Javascript