Welcome, Old Sport!

CSS中的fit-content

by ilikecss ON 2013/03/12 11278

CSS的fit-content介绍无意中在老外的博客(Roger Johansson)看到这个CSS教程,之前不知道这个属性更不用说使用了,看后了解到这个CSS属性是用来水平居中的,我们以前接触过的CSS居中无非就是margin:0 auto, center;这篇教程就是告诉你在一个层元素中间包含float元素后如何使它水平居中,一起来看下代码吧。

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

<ul>
  <li><img src="" alt="" /></li>
  <li><img src="" alt="" /></li>
  <li><img src="" alt="" /></li>
</ul>
ul li { float:left;}

如此这个导航是不会居中的,当我们可以通过设置fit-content来做到居中。下面我做了一个demo,大家可以通过firebug来看下我的CSS代码。demo中图片都带有float属性。demo2利用了fit-content依然居中。

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

width:-moz-fit-content;
width:-webkit-fit-content;
10条评论
  1. #1

    小蝴蝶说道:

    沙发!看到订阅更新马上跑过来

  2. #2

    啄木游弋说道:

    :?: IE内核,看不到效果。

  3. #3

    zwwooooo说道:

    兼容性是永远的痛……

  4. 只支持Chrome和Firefox浏览器




TOP