简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > css教程 > 正文

fit-content实现元素水平居中

php中世界最好的语言
发布： 2018-03-21 13:18:38
原创
1851 人浏览过

这次给大家带来fit-content实现元素水平居中，fit-content实现元素水平居中的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

css3的pointer-events使用详解

完全利用CSS实现元素居中

font-size-adjust属性如何优化网页排版

以上是fit-content实现元素水平居中的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
fit-content 居中 水平
来源：php.cn
上一篇：CSS生成常用的图标样式 下一篇：用calc()实现响应式布局
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
我应该从哪里开始让这个网页响应？ <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8...
来自于 2024-04-04 21:21:25
0
1
457
PHP教程：如何使用PHP将文本与图片上传到Linkedin？ 我尝试使用LinkedinsRestAPI上传文本、图像和链接(https://learn.microsoft.com/en-us/linkedin/consumer/integr...
来自于 2024-04-03 18:42:29
0
1
420
为什么我的 Jquery 滑块无法正确显示？ 我正在尝试在我的WordPress自定义主题中实现SlickSlider库，以显示从高级自定义字段插件获取的图像滑块。但是，我遇到了滑块只是将图像堆叠在一起的问题，滑块功能不起作用...
来自于 2024-04-03 10:43:26
0
1
397
如何通过 onblur 事件获取输入值？ 我试图通过onblur事件获取值输入，但当我使用JS模块时，它不起作用。<!DOCTYPEhtml><htmllang="en"><...
来自于 2024-04-03 08:55:32
0
1
360
让表格列在移动视图上堆叠是我的目标 我有5列，我将它们作为表格，因为这是我编码的最简单方法。我想让它们堆叠在移动视图上。我该如何去做呢？我的格式是：#container{display:table;width:100...
来自于 2024-04-02 20:50:17
0
1
274
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！