当前位置：首页 → 问答吧 → 老问题左右绝对剧中（补差值）新问题...

老问题左右绝对剧中（补差值）新问题...

时间：2011-03-08

来源：互联网

复制内容到剪贴板

代码:

以下是运行代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>左右绝对居中</title> <style type="text/css"> body{margin:0 auto; padding:0px;} .center_box { position: absolute; width: 970px; left: 50%; margin-left: -485px; } .index_box{width:970px; height:250px; background:#006699; text-align:center; line-height:250px; color:#FFF;} </style> </head> <body> <div class="center_box"> <div class="index_box"> 我是左右绝对居中 </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

那，如果我想在左右绝对居中的 BOX上面有一条导航，该头部导航随着浏览器的大小而自适应那如何写呢？这种绝对居中方法可以实现吗？

如：第一种分辨率
第二种分辨率

这种如何实现？支持IE系列、FIREFOX、Chrome 等主浏览器。

[ 本帖最后由 tandongs 于 2011-3-8 18:19 编辑 ]

作者: tandongs 发布时间: 2011-03-08

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>左右绝对居中</title> <style type="text/css"> body{height:100%;width:100%; background-color:#CCC;} *{margin:0;padding:0;} #doc{margin:0 auto;} #hd{height:150px; background-color:#999;} .hd-box{width:970px;margin:0 auto;height:150px; background-color:#F00;} .center_box { position: absolute; width: 970px; left: 50%; margin-left: -485px; } .index_box{width:970px; height:250px; background:#006699; text-align:center; line-height:250px; color:#FFF;} </style> </head> <body> <div id="doc"> <div id="hd"> <div class="hd-box"></div> </div> <div class="center_box"> <div class="index_box"> 我是左右绝对居中 </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

是这个意思么

作者: businessDiv 发布时间: 2011-03-09

老问题左右绝对剧中（补差值）新问题...

代码:

热门阅读

热门下载