CSS技巧两则——居中和编号列表

利用css让对象居中，比如是一个div，有人说这还不简单？不就是text-align: center么？其实不对，这只是让对象所包含的内容居中，而不是让对象本身居中，其实，我还没有找到能够直接让div等块div对象居中的css方法，不过从 Computing.Net找到了一个替代方案：

比如一个div，宽度设定为60%，那么要使他居中，笨的方法就是用另外一个带有text-align: center属性的div或其他容器包含它，聪明一点的办法是这样：

margin-left: 20%;

左缩进20%加上div本身的宽度60%是80%，剩余的右缩进自然就是20%，所以div看起来就像是居中了一样。

第二个问题是编号列表，如何实现像word或者openoffic那样自动层级的编号？先看我实现的例子吧：

看到没有，在上面这个例子中，有着两级编号，并且和一般html中的

不同的是，两级编号是连续的，并且在标题中可以定制编号的样式。为了让大家看得更清楚，我把代码贴出来。不要想着用查看源代码的方式来观察，由于Wordpress有自动纠错功能，会自动把嵌套的

给补全，所以我改成用javascript+String.fromCharCode (n)方式输出了，查看不方便。

 
     
大标题一
     
         
小标题1
         
小标题2
     
     
大标题二
 
 

现在清楚了吧，用display: marker和:before来定义列表项目前面显示的内容，用counter来定义计数器，用content定义要显示的形式，用counter-increment定义计数器自增值，用counter-reset定义计数器归零的条件，就可以实现复杂公文处理系统中的可定制多级编号了，在Firefox2中测试通过，不保证在IE下能用。更详细的资料，请查询 W3C的CSS文档。

什么？不知道word和openoffice的多级编号？Orz…自行放狗搜索吧。

Source:http://www.fwolf.com/blog/post/308