博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3技巧:fit-content水平居中
阅读量:7034 次
发布时间:2019-06-28

本文共 645 字,大约阅读时间需要 2 分钟。

当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么你可以略过这篇文章,没用过的同学就继续了, 我也是第一次看到这个属性,之前不知道这个属性更不用说使用了,原来这个CSS属性是用来水平居中的,fit-content是CSS3中给width属 性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;一起来看下代码吧。

在不设置宽度,并且元素中含用float:left情况下居中,先看一段代码:

li{
float:left}

如此这个导航是不会居中的,当我们通过设置fit-content加上margin来做到居中。

ul{
width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin: auto; }

目前这个属性只支持Chrome和Firefox浏览器,下面是居中的代码:

width:-moz-fit-content; width:-webkit-fit-content;

转载于:https://www.cnblogs.com/zhaoleilei/p/4977634.html

你可能感兴趣的文章
有线电视的用户信息,成为美国黑客的新目标
查看>>
物联网智慧社区 衣食住行全智能
查看>>
高性能的Python扩展:第一部分
查看>>
Qt Linguist介绍
查看>>
Qt Creator快捷键
查看>>
《C语言解惑》—— 2.2 printf输出整数或字符
查看>>
为什么在 Redis 实现 Lua 脚本事务?
查看>>
《草根自媒体达人运营实战》一一2.4 总结
查看>>
Linux 内核被指缺乏安全性
查看>>
《Hadoop与大数据挖掘》——2.7 本章小结
查看>>
《Unity 3D人工智能编程》——2.2 子弹类
查看>>
flatpickr 发布 V3 版本 ,Javascript 日期选择器
查看>>
Win10 Creators Update:自动激活磁盘清理工具
查看>>
《淘宝店铺 大数据营销+SEO+爆款打造 一册通》导读
查看>>
开源大数据周刊-第57期
查看>>
java中文乱码解决之道(六)—–javaWeb中的编码解码
查看>>
《数字图像处理与机器视觉——Visual C++与Matlab实现(第2版)》导读
查看>>
后台 JavaScript 编译改进 Chrome 性能
查看>>
数据结构课程设计实战
查看>>
Rabbit.js —— 国产 RESTful 应用开发框架
查看>>