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

update @ 2007-04-10

让对象居中,只需要一句css:margin: auto;,感谢dNgpNg和heiyo的指正。下面是我自己瞎找的笨办法,仅供大家开拓一下思路。

利用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中的<ol>不同的是,两级编号是连续的,并且在标题中可以定制编号的样式。为了让大家看得更清楚,我把代码贴出来。不要想着用查看源代码的方式来观察,由于Wordpress有自动纠错功能,会自动把嵌套的<ol>给补全,所以我改成用javascript+String.fromCharCode(n)方式输出了,查看不方便。

<style type="text/css" media="screen">
<!--
#number_list {counter-reset: c_level1}
#number_list ol {counter-reset: c_level2}
#number_list li {list-style-type: none;}
#number_list li:before {display: marker; content: "§ " counter(c_level1, decimal) "、"; counter-increment: c_level1 1}
#number_list ol li:before {display: marker; content: "§ " counter(c_level1) "." counter(c_level2, decimal) "、"; counter-increment: c_level2 1}
-->
</style>
<ol id="number_list">
    <li>大标题一</li>
    <ol>
        <li>小标题1</li>
        <li>小标题2</li>
    </ol>
    <li>大标题二</li>
</ol>

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

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

3 thoughts on “CSS技巧两则——居中和编号列表”

Leave a Reply

Your email address will not be published. Required fields are marked *