展开全部
3种方法:
1)div+css /w3c 好处:div+css,代码编译好;不足之处:不支持ie6 7 8浏览器32313133353236313431303231363533e59b9ee7ad9431333335326261
css:
.gd ,.gd div{margin:0 auto; overflow:hidden; display:block;}
.gd{width:1000px;}
.gd .gd_tr{display:table; width:950px;}
.gd .black{width:1000px; color:#fff; background:black;}
.gd .c100{width:100px;}
.gd .c50{width:50px;}
.gd .c800{width:800px;}
/*line-height的值请按需变化使用*/
.gd .red{height:100px; line-height:100px; background:red;}
.gd .pink{height:50px; line-height:50px; background:pink;}
.gd .blue{height:25px; line-height:25px; background:blue;}
.gd .cell{display:table-cell; vertical-align:middle;}
html结构代码:
red
pink
blue
black
2)使用table,好处:方便快捷,支持所有浏览器;不足之处:table维护差,可读性相比div差,修改繁琐,基本固定死难以更改,面向静态内容。
css:
.gd_table{border-collapse:collapse;}
.gd_table td{vertical-align:middle; height:100px;}
.gd_auto td{height:auto;}
.gd_table td span.s_cell{display:block;}
.gd_table td span.red{background:red; height:100px;}
.gd_table td span.pink{background:pink; height:50px;}
.gd_table td span.blue{background:blue; height:25px;}
.gd_table td span.black{background:black; color:#fff;}
html结构代码:
red | pink | blue |
black |
3)相对定位法,好处:div+css、可调节、动静态网站均可用,支持全部浏览器;不足之处:维护性差,较为偏向静态网页。
css:
.gd_pos ,.gd_pos div{margin:0 auto; overflow:hidden; height:auto; display:block;}
.gd_pos{width:1000px;}
.gd_pos .inside{width:950px; height:100px; position:relative; z-index:1;}
.gd_pos .red ,.gd_pos .pink ,.gd_pos .blue{position:absolute; z-index:1; top:50%;}
.gd_pos .red{width:100px; height:100px; margin-top:-50px; left:0; background:red;}
.gd_pos .pink{width:50px; height:50px; margin-top:-25px; left:100px; background:pink;}
.gd_pos .blue{width:800px; height:25px; margin-top:-13px; left:150px; background:blue;}
.gd_pos .black{color:#fff; background:black;}
html结构代码:
red
pink
blue
black
以上均供参考,图片文字均可垂直居中,希望能帮到你。