`

DIV 居中的绝好解决方法

    博客分类：
  • CSS
JavaScriptCSSXHTMLWebHTML 
阅读更多

现在进行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>的后面.

分享到：
| 虚拟机上安装了Linux怎么桌面不能全屏
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css相关资料汇总------总有你需要的

    DIV 居中的绝好解决方法.txt DIV+CSS制作专业信息网站的制作规范 .txt DIVCSS布局大全.pdf dom10.chm web标准化设计：常用的CSS命名规范.mht 学习网页技术CSS样式表整理的20个技巧.txt 样式表滤镜中文手册....

    固定宽度 高度的页面在不同分辨率的屏幕上垂直 水平居中

    使用视口单位来设置元素的`width`和`height`，然后通过相对定位、变换技术（`transform: translate`）或者负边距的方法来居中，是一种现代的解决方案，但要注意IE8及以下版本的浏览器不支持视口单位。 6. 考虑响应...

    CSS.rar_chm_css chm_csshelp c

    5. **DIV 居中的绝好解决方法.txt**：在网页设计中，使元素居中是一个常见的需求。这个文本文件提供了一种或多种将`div`元素居中的方法，可能包括使用`margin: auto`、`display: flex`或`grid`布局等。 6. **...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery实现的多功能弹出窗插件weebox及示例代码 9.一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本...

    css十大绝秘技巧

    ### CSS十大绝秘技巧解析 #### 一、精简字体属性定义 在CSS中，我们经常需要设置元素的字体样式，包括字号、行高、字体加粗、斜体、小型大写字母以及字体类型等。一种更为简洁的方法是将这些属性合并到一个`font`...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段，涵盖页面开发中绝大多数要点、技巧与方法，堪称史上最实用的jQuery代码参考书，可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    易语言程序免安装版下载

    　使用说明如下：函数声明和调用方法与DLL命令一致；“库文件名”以.lib或.obj为后缀的将被视为静态库，可使用绝对路径或相对路径（相对当前源代码所在目录），如依赖多个静态库请分别列出并以逗号分隔；“在库中的...

Magicbox
Global site tag (gtag.js) - Google Analytics