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-11-02 06:07:04

DIV 居中的绝好解决方法的相关文章

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"> 为此

关于页面嵌入swf覆盖div层的问题的解决方法

 这篇文章主要介绍了关于页面嵌入swf覆盖div层的问题的解决方法,需要的朋友可以参考下 如果swf是通过<object></object>方式插入的话,那就加入以下这断代码  代码如下: <param name="wmode" value="Opaque">    还有一种方法是通过script_swfobject.js插件来插入swf的,这时用下面的方法来设置:   代码如下: <div id="flashco

Google浏览器CSS居中兼容问题完美解决方法

在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中可是在谷歌浏览器查看时就出现无法居中的BUG,下面的解决方法有类似情况的朋友可以参考下   div做的界面时,又出现CSS hack(CSS兼容浏览器问题)在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中,如下划线 _ IE6优先识别,!important 仅火狐firefox浏览器识别.可是在谷歌浏览器查看时,就出现兼容Google浏览器的BUG了,无法居中. 现在向

javascript中onmouse事件在div中失效问题的解决方法_javascript技巧

也就是说,移到对象的子对象上,也算onmouseout了.但这往往会达不到我们想要的预期效果.这是由于javascript自身的冒泡特性导致的(即在子元素上触发了事件,并冒泡到了父元素-堆栈后进先出算法).今天在网上搜了一下,找了以下的解决办法(兼容IE和Firefox). 在IE下解决问题很简单,用onMouseEnter.onMouseLeave来代替onMouseOver.onMouseOut就行了,他们的作用基本相同,但前者不会发生冒泡(如果用 jQuery的event事件,只要绑定mo

关于页面嵌入swf覆盖div层的问题的解决方法_javascript技巧

如果swf是通过<object></object>方式插入的话,那就加入以下这断代码 复制代码 代码如下: <param name="wmode" value="Opaque"> 还有一种方法是通过script_swfobject.js插件来插入swf的,这时用下面的方法来设置: 复制代码 代码如下: <div id="flashcontent"></div> <script ty

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

IOS中手风琴表不能移动的解决方法_IOS

我有一个手风琴的表上的所有设备和浏览器正常工作,但根本不工作在 ios 移动.我找到了解决的办法也仅为 div 的和使用 href,但对我而言,我真的需要用几个列的表.在这里,你有我使用的自举 代码http://jsfiddle.net/k3yrnsux/ . <div class="table-content"> <table id="table-collapse" class="table table-responsive table

messagebox相对于div层居中解决方法

messagebox相对于div层居中解决方法 public void wndprocret(object sender, wndprocreteventargs e)         { switch (e.cw.message)             {                 case wndmessage.wm_initdialog:                 case wndmessage.wm_unknowinit:                     user3

div+css的兼容性问题和解决方法

1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;}   2. 水平居中的问题 问题: 设置 text-align: center    ie6-7文本居中,嵌套的块元素也会居中 ff /opera /safari /ie8文本会居中,嵌套块不会居中 解决: 块元素设置  1.margin-left:auto;margin-right:auto 2.margin:0 auto; 3. <div align="center&qu