DIV、UL、li、image水平竖直居中代码大全(for ie firefox opera)~

1、DIV在整个body中水平居中:

#DivComment{
    position:absolute;
    top: 90%;
     left: 45%;
    width:40%;
    margin:0 0 0 -240px;
    padding: 10px 10px 0px 0px;
}

效果见:这里的评论层

2、DIV在另一个DIV中水平居中:

#div1{
TEXT-ALIGN: center;
}
#div2{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
}

在要居中的div的父级元素(未必是div,可以是ul、li等)中设置TEXT-ALIGN: center;即可实现此div居中,但仅限于IE6&IE7。在此div中加上MARGIN-RIGHT: auto; MARGIN-LEFT: auto;或者margin: 0 auto;即可实现在firefox中也居中。

3、UL居中和li水平居中:

其实任何居中,只要是web元素,可加上id属性的都可以使用上面的方法。只是要记住需把ul、li的宽度设置一下才,最好加个背景色才可以看出是否居中。否则ul、li默认是一条撑满div的“楼梯”,是看不出是否居中的。

4、image居中:

也可用上述方法,但我发现有时直接用最简单的<div align=center><img src=”xxx.jpg”></div>,维护起来更方便

5、DIV垂直居中

可参考以下文章:
div+css实现Firefox和IE6兼容的垂直居中
CSS如何使DIV层居中之我见
css中如何使div居中(垂直水平居中)


TO:http://www.chenfangyi.com/div-ul-li-text-align-center.html

posted @ 2008-02-22 21:57  阳光囧男  阅读(9104)  评论(5编辑  收藏  举报