DIV 居中的绝好解决方法_经验交流

现在进行WEB重构的时候,一般我们做DIV 居中是这样: 

复制代码 代码如下:

body{
margin:0px auto;
text-align:center;
}

但是在没申明下面这句解析方法的时候,页面就会出错.不能居中对齐!

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

为此困扰了我几天.那么有的朋友就会说:你加上这句不就行了吗? 可是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.
直到昨天,一个想法在我脑中闪了一下. 何不用JS来控制页面的边距?说干就干!
找了个页面.添加了下面的一小段代码. 

复制代码 代码如下:

<script language="javascript" type="text/javascript" src="function.js"></script>

function.js内容: 

复制代码 代码如下:

if(window.screen.width>800){document.write("<style type=\"text/css\">body{margin-left:"+(window.screen.width-800)/2+"px}</style>");}

保存,测试. 哈哈,换了几个分辨率都可以正常居中!至此试验成功.
总结一下:
主要是这句代码起的作用: 

复制代码 代码如下:

(window.screen.width-800)/2 //计算页面应该留出的边距数值.800为我的DIV宽度 + 滚动条宽度.实际应用改为你自己的大小. 

补充一点:上面这段JS 必须放在你的最后一个CSS连接或</style>的后面.
欢迎大家到我的小站交流更好的实现方法! 

时间: 2024-09-20 23:16:30

DIV 居中的绝好解决方法_经验交流的相关文章

div总是被select遮挡的解决方法_经验交流

<html>  <head>  ­  <meta http-equiv="Content-Type" c>  ­  <title>div被select遮挡的解决方法--</title>  </head>  <body>  ­  <iframe style="position:absolute;z-index:9;width:expression (this.nextSibling.off

DIV 居中的绝好解决方法

解决 现在进行WEB重构的时候,一般我们做DIV 居中是这样:body{margin:0px auto;text-align:center;}但是在没申明下面这句解析方法的时候,页面就会出错.不能居中对齐!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">为此困扰了我几天.那么有的朋友就会说:你加上这句不就行了吗

当标题不能显示完整的解决方法_经验交流

其实建议用css控制超出隐藏显示 也就是标题因为设计的宽度问题所以没有显示全,看样子是使用程序来截字的.我想很多网站都遇到这样的情况.为了视觉效果不得不进行截字显示以满足网站的整体视觉效果.通常我们采用截字的方法是两种,一种是通过后台输出时来事先设定一定的字符数量.另一种是通过CSS或是JS来对已经输出的完整的内容进行视觉剪截. 在网页标准没有兴起的时候基本上是采用第一种方式来解决这个问题,直到现在这种方式依然被广泛地使用着.这种方式的好处就是可以准确的剪截字数,而不足可能就是因为剪截的工作在后

DIV border边框显示不完全问题的解决方法_经验交流

第一次遇到这样的问题,就是定义div的边框有部分却显示不了.而在firefox里却是一切正常,该死的ie,太过分了. 代码也没有问题,查了好多资料,还百度了许多网站,在blueidea里也没有找到解决办法.后来在台湾的一个网站上发现了一个很几的解决办法: 如下: 左右两边的边框就是不显示,气不死你~~郁闷, css是: 复制代码 代码如下: #divproject {    margin-top: 5px;    border: 1px solid #0099CC;  }  后来按照那个网站的介

解决 select 挡住div的解决方法_经验交流

在div里加入下面的代码,根据需要调整就可以了 复制代码 代码如下: <iframe src="javascript:false" scrolling="no" frameborder="0" style="z-index:-1;position:absolute; top:; left:;width:;height:;"> </iframe>

解决div被flash挡住的设置方法_经验交流

<param name="wmode" value="opaque"> 改成: <param name="wmode" value="transparent">

float引起层飘出父层的解决方法_经验交流

1.加clear空div .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;}/* End hide from IE-m

IE Bug--浮动对象外补丁的双倍距离的解决方法_经验交流

The IE Doubled Float-Margin Bug  IEBug--浮动对象外补丁的双倍距离 先看以下代码: #box{     background: ThreedFace;     width: 500px;     height: 400px;     } #box1{     float: left;     background: #F2F2F2;     width: 300px;     height: 200px;     margin-left: 50px;    

在IE下拖动滚动条时border消失的解决方法_经验交流

通常我会用DIV加上border来定义边线,可有时发现在IE下拖动滚动条时border会经常消失,当你刷新时,又会出来.这个问题,我想了很久也没有想出什么原因,所以在些之前用DIV+CSS所写的页面中,这个问题都存在.今天,这个问题,实在太影响最终结果,所在找了一个提示: "以为DIV加上一个高度就能解决."下面传张前后对比图. 至于产生这个问题的原因,我想应该是IE的BUG吧.当你用Mozilla Firefox / Opera 则不会产生这种问题.