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>的后面.
欢迎大家到我的小站交流更好的实现方法!

赞 (0)

相关推荐

  • 通过JavaScript使Div居中并随网页大小改变而改变

    通过JavaScript使Div居中并随网页大小改变而改变

    在使用Java做后台的时候,都会做到登录的页面,但是自己的页面太难看了,要居中没居中,要颜色没颜色,但是无论是怎么样都得使登录的框居中吧!以前的想法是通过CSS+Div使div居中,但是现在的想法变了,通过JavaScript可以简单的使Div在页面上居中,随着网页大小的改变做出相应的改变.而且只要明白了居中的原理轻而易举的就可以实现了. 先看一下居中的原理吧! 先看一张图.  从图中看到了什么?可以看到红色的框居中了,为什么会居中呢?通过观察可以发现红框的上下的蓝色的间距线是一样长的,这样可以

  • jquery div 居中技巧应用介绍

    very short version: [html] 复制代码 代码如下: $('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'}); $('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('

  • 用js 让图片在 div或dl里　居中，底部对齐

    解决图片长\宽大于容器,一边长一边宽,小于容器 在ff,ie里都通过这里是js代码: 复制代码 代码如下: <HTML>  <HEAD>   <TITLE> 我们 www.jb51.net New Document </TITLE>   <META NAME="Generator" CONTENT="EditPlus">   <META NAME="Author" CONTENT=

  • 基于jQuery实现的水平和垂直居中的div窗口

    1.通过css实现水平居中: 复制代码 代码如下: .className{ margin:0 auto; width:200px; height:200px; } 2.通过css实现水平居中和垂直居中 通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道另外一个div的尺寸: 复制代码 代码如下: .className{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-1

  • CSS如何使DIV层居中

    如何使DIV居中主要的样式定义如下: body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中:对于IE这样设定就已经可以了.但在mozilla中不能居中.解决办法就是在子元素定义时候设定时再加上"MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " 需要说明的是,

  • JS弹出居中的DIV的代码

    首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义  document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度.大小随着浏览器的窗口大小而改变.  document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度.大小随着浏览器的窗口大小而改变.  document.body.scrollTop(网页被卷去的高):是指拉

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

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

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

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

    如果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.o

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

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

  • flash遮住div问题的正确解决方法

    在项目中遇到了一个困惑好久的问题,今天终于解决了.其实解决方法很简单. 直接上代码: 复制代码 代码如下: <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> // For version detection, set to min. required Flash Player v

  • JavaScript中无法通过div.style.left获取值的解决方法

    JavaScript中无法通过div.style.left获取值的解决方法

    一.问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取. 让元素移动到200停止 setTimeout ( function () { var div = document.getElementById("div4"); //var left = parseInt(div.style.left) + 5; var left = div.offsetLeft + 5; div.sty

  • js防止DIV布局滚动时闪动的解决方法

    本文实例讲述了js防止DIV布局滚动时闪动的方法,分享给大家供大家参考.具体方法如下: 最近接触页面性能的东西,有很多细微又原始的内容,比如浏览器渲染.资料非常多,所以选一些做节译,备忘. JavaScript多次写.读DOM就会发生「布局颠簸」,引起文档重排(reflow – the process of constructing a render tree 复制代码 代码如下: from a DOM tree1). // 读 var h1 = element1.clientHeight; /

  • div中文字内容溢出常见的解决方法

    由于文字内容的长度不确定性和页面布局的固定性,常常会遇到文字溢出的状况,有一下解决方法: 1:规定文字父容器的宽高,设置超出隐藏:overflo:"hidde" -------缺点是会经常遇到最后一行文字显示不全的情况,建议在只控制一行文字显示的时候使用 2:css+div防止文字溢出,超出部分变成省略号,折行显示,white-space:nowrap;word-break:break-all: text-overflow:ellipsis; -o-text-overflow:elli

  • vue使用v-if v-show页面闪烁,div闪现的解决方法

    在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果. 可以在根元素添加v-cloak来解决,并且设置它的样式即可. 代码只是示例,还需要自己修改测试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

随机推荐