编程 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动画过渡实现鼠标跟随导航效果

Feb 08 HTML / CSS

HTML5+CSS3网页加载进度条的实现，下载进度条的代码实例

Dec 30 HTML / CSS

CSS实现聊天气泡效果

Apr 26 HTML / CSS

CSS3实现歌词进度文字颜色填充变化动态效果的思路详解

Jun 02 HTML / CSS

animation和transition的区别

Oct 12 HTML / CSS

html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法

Jan 09 HTML / CSS

html5 css3网站菜单实现代码

Dec 23 HTML / CSS

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

Apr 24 HTML / CSS

利用Node实现HTML5离线存储的方法

Oct 16 HTML / CSS

使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)

Apr 07 HTML / CSS

css如何把元素固定在容器底部的四种方式

Jun 16 HTML / CSS

使用HBuilder制作一个简单的HTML5网页

Jul 07 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批量生成缩略图的代码

2008/07/19 PHP

分割GBK中文遭遇乱码的解决方法

2013/08/09 PHP

PHP 下载文件时自动添加bom头的方法实例

2014/01/10 PHP

php读取本地json文件的实例

2018/03/07 PHP

javascript编程起步（第七课）

2007/02/27 Javascript

Javascript 模式实例观察者模式

2009/10/24 Javascript

js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)

2011/03/25 Javascript

JavaScript高级程序设计阅读笔记（十三） js定义类或对象

2012/08/14 Javascript

用jquery实现输入框获取焦点消失文字

2013/04/27 Javascript

JavaScript中的object转换成number或string规则介绍

2014/12/31 Javascript

基于jquery实现select选择框内容左右移动添加删除代码分享

2015/08/25 Javascript

Bootstrap模态框水平垂直居中与增加拖拽功能

2016/11/09 Javascript

JavaScript学习笔记之函数记忆

2017/09/06 Javascript

JavaScript实现鼠标滚轮控制页面图片切换功能示例

2017/10/14 Javascript

vue-router2.0 组件之间传参及获取动态参数的方法

2017/11/10 Javascript

vue观察模式浅析

2018/09/25 Javascript

详解Vue template 如何支持多个根结点

2020/02/10 Javascript

JavaScript代码实现简单计算器

2020/12/27 Javascript

Python中的多重装饰器

2015/04/11 Python

Python实现的摇骰子猜大小功能小游戏示例

2017/12/18 Python

让Django支持Sql Server作后端数据库的方法

2018/05/29 Python

python频繁写入文件时提速的方法

2019/06/26 Python

pytorch 在网络中添加可训练参数,修改预训练权重文件的方法

2019/08/17 Python

Python3 用什么IDE开发工具比较好

2020/11/28 Python

HTML5 与 XHTML2

2008/10/17 HTML / CSS

HTML5+CSS3绘制锯齿状的矩形

2016/03/01 HTML / CSS

环境科学专业大学生自荐信格式

2013/09/21 职场文书

寒假实习自荐信

2014/01/26 职场文书

个人投资合作协议书

2014/10/12 职场文书

挂职个人工作总结

2015/03/05 职场文书

2015年教师节慰问信

2015/03/23 职场文书

小学班主任工作总结2015

2015/04/07 职场文书

2015年“公民道德宣传日”活动方案

2015/05/06 职场文书

2016年校园重阳节广播稿

2015/12/18 职场文书

Python机器学习之基础概述

2021/05/19 Python

pytorch 梯度NAN异常值的解决方案

2021/06/05 Python