DIV居中的绝好解决方法

2016-02-19 18:31 7 1 收藏

下面是个超简单的DIV居中的绝好解决方法教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - Web开发 】

  现在进行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来控制页面的边距?说干就干!

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

找了个页面.添加了下面的一小段代码.

script language="javascript" type="text/javascript" src="function.js"/script
function.js内容:
if(window.screen.width800){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的后面.

欢迎大家到我的小站交流更好的实现方法! 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1618011.html

延伸阅读
标签: Web开发
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢出”和“...
标签: Web开发
网页布局技巧实例,想让DIV居中,如何编写CSS? div居中的设置该如何编写css?我们在传统的表格布局中,只要设置表格的居中属性就实现了居中的块元素。应用div css网站布局,div的居中该如何编写css来控制它呢? 主要的样式定义如下: body {text-align: center;} #center { margin-right: auto; margin-left: auto;...
标签: Web开发
关于CSS 控制DIV水平居中问题,我看到很多新人搞不明月。记得第一次看CSS是一个老外写的书,那个里面谈到居中使用。 margin-left:auto; margin-right:auto; 其实等同于: margin:0 auto; 于是可以使用这种方式,但是有人用IE时发现没有居中。这里建议你看看是否遗漏了DTD声明。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Tr...
标签: Web开发
一般来说,指定高度的DIV垂直和水平居中比较方便,而不定高度的话就稍微麻烦了点,我尝试了一下,通过2个辅助的DIV实现了绝对居中,兼容IE和FF等标准浏览器。 CSS代码: #wrapper{height:100%;width:100%;overflow:hidden;position:relative} #wrapper[id]{display:table;} #mid{position: absolute;top:50%;left:50%} #mid[id]{dis...
标签: Web开发
因为垂直居中的主要问题出在IE系列上,因此用到了IE的条件注释、IE8的兼容视图,还算完美解决了目前所有的主流浏览器的CSS实现DIV内容垂直及水平居中问题,IE5.5,IE6,IE7,IE8,Firefox,Chrome,Safari,Opera 测试通过,逸品天空Web开发代码站 http://code.dlstu.cn/。 核心代码:  程序代码 meta http-equiv="X-UA-Compatible" co...

经验教程

67

收藏

74
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部