DIV居中的绝好解决方法

enjoy王松平

enjoy王松平

2016-02-19 18:31

下面是个超简单的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"

为此困扰了我几天.那么有的朋友就会说:你加上这句不就行了吗? 可是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.

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

直到昨天,一个想法在我脑中闪了一下. 何不用JS来控制页面的边距?说干就干!

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

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的后面.

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

DIV居中的绝好解决方法

Web开发
DIV居中的绝好解决方法

DIV实现垂直居中对齐的方法

Web开发
DIV实现垂直居中对齐的方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

DIV下图片自适应解决方法

Web开发
DIV下图片自适应解决方法

Div上下居中

Web开发
Div上下居中

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

解决用CSS控制DIV居中失效的问题

Web开发
解决用CSS控制DIV居中失效的问题

图片img与div容器下有间隔的解决方法

Web开发
图片img与div容器下有间隔的解决方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Oracle 9i个人版出现的错误信息

Oracle 9i个人版出现的错误信息

在Word2010文档窗口中查看Word文档被修改次数

在Word2010文档窗口中查看Word文档被修改次数
下拉加载更多内容 ↓