• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

CSS3技巧:fit-content水平居中

JavaScript web前端中文站 2年前 (2017-09-28) 822次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

查看效果

<div class="navbar center">   <ul>     <li><a href="/">首页</a></li>     <li><a href="/">关于我们</a></li>     <li><a href="/">产品展示</a></li>     <li><a href="/">客户支持</a></li>     <li><a href="/">联系我们</a></li>   </ul> </div> 
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; 

 

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS3 技巧:fit-content 水平居中
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址