`

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怎么桌面不能全屏
评论
发表评论

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

相关推荐

    div水平居中的方法

    CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法

    DIV+CSS DIV居中布局

    这是最常见的一种居中方法，适用于知道元素宽度的情况。设置`margin-left`和`margin-right`为`auto`，可以使`&lt;div&gt;`在父容器中水平居中。例如： ```css .centered-div { width: 200px; /* 元素的宽度 */ margin...

    div居中div居中的8种方法

    在网页设计中，让`div`元素居中是一项常见的需求，可以实现各种视觉效果和布局。...在实际项目中，结合图片资源`div居中方法（共8种）.png`和文档`资源说明.txt`，可以更直观地理解和运用这些方法。

    DIV居中及DIV垂直居中.html

    该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.

    div垂直居中的N种方法

    ### DIV垂直居中的N种方法：详尽解析与实践 在网页设计中，DIV元素的垂直居中一直是前端开发者关注的焦点。无论是响应式布局的需求，还是美观度的提升，垂直居中的实现都能显著增强用户体验。本文将深入探讨并演示...

    CSS网页布局DIV水平居中的各种方法

    本文将详细探讨几种实现DIV水平居中的方法。 1. **使用`margin: 0 auto`** 这是现代浏览器中最常用的方法。通过设置元素的左右外边距(`margin-right`和`margin-left`)为`auto`，可以使其在容器中水平居中。例如： ...

    div层居中代码下载

    在网页设计与开发过程中，经常需要将页面中的元素（如DIV）居中显示，以达到更好的视觉效果和用户体验。本文将详细介绍如何实现DIV的水平居中以及垂直居中，并提供具体的代码示例。 #### 二、水平居中 ##### 2.1 ...

    DIV 垂直居中

    DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中

    在DIV中图片垂直/水平居中(最简单方法).rar

    在CSS中，有多种方法可以使图片在div中居中，但最简洁的方式通常采用Flexbox或Grid布局。下面是两种方法的实现： 1. **Flexbox布局**： - 首先，将div的display属性设置为`flex`，创建一个弹性容器。 - 接着，...

    div框水平垂直居中跟内容垂直居中.html

    div框水平垂直居中跟内容垂直居中

    CSS解决未知高度的DIV垂直居中

    通过上述方法，我们可以有效地解决未知高度的`DIV`元素垂直居中的问题。这种方法不仅具有良好的兼容性，而且代码简洁，易于理解。无论是对于初学者还是有一定经验的开发者来说，都是一种值得学习和掌握的技巧。

    div垂直居中屏幕

    div垂直居中屏幕的方法，兼容IE6 7 8 Firefox

    Jsp中如何让图片在div中居中

    在讨论JSP页面中图片居中的问题时，首先需要掌握一些基础的CSS布局知识，包括display属性的使用、垂直居中的方法、margin属性的自动居中技巧以及W3C标准对页面渲染的影响。 当涉及到在div中居中一张图片时，CSS是...

    div在div中居中的多种方式演示.html

    提供了div在div中居中的多种方式，直接打开文件F12查看样式即可，简单方便。不再只会使用绝对布局

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    创建一个弹出div层窗口的关键在于利用jQuery的`show()`、`hide()`、`fadeIn()`、`fadeOut()`等方法来控制div的可见性，同时通过CSS来定义其样式，如边框、填充、背景色等。以下是一个简单的示例： ```html &lt;div id=...

    DIV水平垂直居中

    首先，我们来探讨CSS中的几种水平垂直居中方法： 1. **Flexbox布局**：这是现代浏览器支持的一种布局方式，可以轻松实现子元素的水平和垂直居中。设置父元素的`display`属性为`flex`，然后添加`align-items: center...

    DIV绝对居中例子

    在网页设计中，让元素居中是一个常见的需求，特别是对于`div`这样的块级元素。在本示例中，我们探讨的是如何实现`div`的绝对居中，无论是水平还是垂直方向，即使`div`的高度是不确定的。下面将详细解释这个`DIV绝对...

    DIV+CSS 图片垂直居中效果

    综上所述，"DIV+CSS 图片垂直居中效果"可以通过多种方法实现，具体选择哪种取决于项目需求、浏览器兼容性和响应式设计的需求。在提供的`index.html`、`images`和`css`文件中，我们可以看到实际的代码应用和图片资源...

    div+css垂直居中和水平居中

    本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的关键。我们将探讨不同情况下的居中策略，并结合给出的`juzhong.html`示例文件进行讲解。...

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