CSS3技巧：fit-content⽔平居中
当我们让⼀个模块⽔平居中⾸先想到的肯定是margin:0 auto；有⽊有？那么今天给⼤家介绍⼀个fit-content属性，不知道有没有同学⽤过，如果⽤过那么你可以略过这篇⽂章，没⽤过的同学就继续了，我也是第⼀次看到这个属性，之前不知道这个属性更不⽤说使⽤了，原来这个CSS属性是⽤来⽔平居中的，fit-content是CSS3中给width属性新加的⼀个属性值，它配合margin可以让我们轻松的实现⽔平居中的效果;⼀起来看下代码吧。
在不设置宽度，并且元素中含⽤float:left情况下居中，先看⼀段代码:
<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>div中的div居中
<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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。