编程 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 background属性调整增强介绍

Dec 18 HTML / CSS

8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)

Feb 04 HTML / CSS

css3让div随鼠标移动而抖动起来

Feb 10 HTML / CSS

CSS3实现超慢速移动动画效果非常流畅无卡顿

Jun 15 HTML / CSS

CSS实现限制字数功能当对象内文本溢出时显示省略标记

Aug 20 HTML / CSS

CSS3实现同时执行倾斜和旋转的动画效果

Oct 27 HTML / CSS

使用HTML5 Canvas绘制直线或折线等线条的方法讲解

Mar 14 HTML / CSS

详解HTML5中垂直上下居中的解决方案

Dec 20 HTML / CSS

详解HTML5 canvas绘图基本使用方法

Jan 29 HTML / CSS

HTML5进度条特效

Dec 18 HTML / CSS

html5 外链式实现加减乘除的代码

Sep 04 HTML / CSS

HTML5简单实现添加背景音乐的几种方法

May 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

编译问题

2006/10/09 PHP

php处理json时中文问题的解决方法

2011/04/12 PHP

php网页病毒清除类

2014/12/08 PHP

php使用wordwrap格式化文本段落的方法

2015/03/17 PHP

laravel框架中视图的基本使用方法分析

2019/11/23 PHP

解决windows上php xdebug 无法调试的问题

2020/02/19 PHP

yii2.0框架多模型操作示例【添加/修改/删除】

2020/04/13 PHP

javascript学习笔记(十九) 节点的操作实现代码

2012/06/20 Javascript

解析Javascript中中括号“[]”的多义性

2013/12/03 Javascript

JavaScript中使用Object.prototype.toString判断是否为数组

2015/04/01 Javascript

JS实现仿QQ效果的三级竖向菜单

2015/09/25 Javascript

javascript 四十条常用技巧大全

2016/09/09 Javascript

jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解

2016/10/24 Javascript

有关suggest快速删除后仍然出现下拉列表的bug问题

2016/12/02 Javascript

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

2018/01/04 NodeJs

Javascript中从学习bind到实现bind的过程

2018/01/05 Javascript

AngularJS基于http请求实现下载php生成的excel文件功能示例

2018/01/23 Javascript

vue实现todolist基本功能以及数据存储功能实例详解

2019/04/11 Javascript

webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程

2019/06/10 Javascript

详细教你微信公众号正文页SVG交互开发技巧

2019/07/25 Javascript

Javascript 对象（object）合并操作实例分析

2019/07/30 Javascript

[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3

2018/06/04 DOTA

[05:00]TI9战队采访 - Royal Never Give Up

2019/08/20 DOTA

Django基础知识与基本应用入门教程

2018/07/20 Python

Python拼接字符串的7种方法总结

2018/11/01 Python

pandas修改DataFrame列名的实现方法

2019/02/22 Python

Python with语句和过程抽取思想

2019/12/23 Python

Python通过递归函数输出嵌套列表元素

2020/10/15 Python

三星新西兰官网：Samsung新西兰

2019/03/05 全球购物

致1500米运动员广播稿

2014/02/07 职场文书

室内拓展活动方案

2014/02/13 职场文书

刮痧观后感

2015/06/05 职场文书

小学运动会宣传稿

2015/07/23 职场文书

python 中的@运算符使用

2021/05/26 Python

使用 Docker Compose 构建复杂的多容器App

2022/04/30 Servers

win10系统计算机图标怎么调出来?win10调出计算机图标的方法

2022/08/14 数码科技