深圳soho网,small office home office
当前位置 : 深圳soho网 >>  web技术  >> 文章正文

div+css的li垂直居中方法

日期:2007-11-15  作者:szsoho  来源:www.szsoho.com   点击:

     几天布局一个页面需要让li里面的文字垂直居中,搞了很多办法终于搞定了,方法如下:

     一、单行内容的居中
    只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-heightheight,并使两值相等,再加上 over-flow: hidden 就可以了,代码如下:

     .demo1 li{
       height: 4em;
       line-height: 4em;
       overflow: hidden;
     }

优点:
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点:
1. 只能显示一行
2. IE中不支持等的居中
要注意的是:
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话,overflow: hidden 一定要

二、多行内容居中,且容器高度可变
也很简单,给出一致的 padding-bottom 和 padding-top 就行

.demo2 li{
padding-top: 24px;
padding-bottom: 24px;
}

优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:
容器不能固定高度