body {width：100％;}

Question

我几乎想出了我的需求 - 看到我的答案，它完成了90％

背景

根据朋友的建议，我最终将我的网站从包含背景图像的表转移到了CSS。

创建原始网站（带表格）时，我无法将页面水平居中和垂直放置。我使用了所有可用的标签，但它不起作用。这很奇怪。

我抓住了JS，根据窗口的高度和宽度，在onLoad（）和onResize（）上将内容设置到屏幕上的正确位置。 Javascript如下：

function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
    windowHeight = window.innerHeight;
}
else {
    if (document.documentElement && document.documentElement.clientHeight) {
        windowHeight = document.documentElement.clientHeight;
    }
    else {
        if (document.body && document.body.clientHeight) {
            windowHeight = document.body.clientHeight;
        }
    }
}
return windowHeight;
}

// Vertically center the #content div
function setContent() 
{
if (document.getElementById) {
    var windowHeight = getWindowHeight();
    if (windowHeight > 0) {
        var contentElement = document.getElementById('body');
        var contentHeight = contentElement.offsetHeight;
        var contentWidth = contentElement.offsetWidth;
        if (windowHeight - contentHeight > 0) {
            contentElement.style.position = 'relative';
            contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
        }
        else {
            contentElement.style.position = 'static';
        }
    }
}
}

旧到新

原始HTML使用表格来显示所有内容。很差！所以我已经转换为CSS。

Here is the new page.

我的问题

我需要将所有div放在页面上，就像桌子一样。但是，将上述JS与align="center"结合使用可以将所有内容放在右边。

如何将所有内容放在屏幕中心，以便在调整屏幕大小时，它们都保留在中心？

我查看了容器，编辑了上面的Javascript来解释.left等等。我需要根据自己的需要量身定制一小段代码。有人可以伸出援助之手，我已经在这里呆了半天了。谢谢！

我想要集中体验的基本代码：

<body bgcolor="#a5a5a5" onLoad="setContent();" onResize="setContent();">
<div id="body" align="center">
    <!-- Horizontal alignment handled with align tag, vertical via Javascript -->
    <div id="img-01"><img src="images/img_01.jpg" width="12" height="584" alt="" align="center"></div>
    <div id="img-02"><img src="images/img_02.jpg" width="365" height="17" alt="" align="center"></div>
// ... and more images in divs, up to about 23

我如何将所有这些中心化？只是想到我注意到最初它是一个单独的div imgs的负载，但我添加了body div，因为它在JS中被引用。当我有桌子时，它只是一个包含所有表格单元格的div，这就是它工作的原因。

编辑：当我认为我有一个水平中心工作时，它似乎更右边75％。困惑，请有人帮忙吗？：）

Answer 1

你的加价完全是一团糟。它使用旧的，不推荐使用的标记。它缺少一个doctype。您正在使用绝对定位，这就是为什么您无法按照自己的意愿居中。你需要坐下来从方形开始，了解当前的现代实践，并构建一个非常简单的div版本，这样你就可以掌握今天的工作方式。你展示的是完全无法使用的。

这可能听起来很苛刻但它就是它。您现在缺少网络标记的基本原理。

Answer 2

好的，关于添加为背景图片的评论让我思考.....

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
background-color:#a5a5a5;
background-image:url('Path to your one big image');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>

<body>

</body>
</html>

适用于Chrome，IE 7-9，最新的Firefox和Safari。无论浏览器窗口有多大，图像都会保留在页面的中心。

Answer 3

首先在所有这些图像div上抛出一个类我将其称为我的图像类

body {width：100％;}

.imagediv {margin-left：auto; margin-right：auto;}

注意：如果图像被包裹在比它们更大的容器内，这将起作用。你实际上可以在这里使用1个css属性，但我做了很长的路。

编辑 - 实际上你并不'真的需要身体{宽度：100％;}
这应该是默认值，然后你的包装应该设置为100％（在体内）

Answer 4

也许this link over at jsfiddle可能会帮助您入门。它很粗糙，只有你的代码的一半，但我希望你能够实现目标。要记住的事情：

1）'align = center'属性已被弃用了很长一段时间......这是从表日开始的保留。
2）老实说，您不需要使用图像来显示您想要的页面。 CSS现在支持盒子阴影，使用谷歌字体或@ font-face可以在你的页面中找到你想要的字体（比使用图像更好。搜索引擎可以这样读取你的文字...这是一个很大的因素在谷歌搜索，BTW排名很好。
3）让你的容器div保持在水平中心是非常容易的，无论你的浏览器窗口有多大，使用margin-left：auto和margin-right：在你的容器div上自动设置。
4）垂直居中有点棘手，但你不必使用Javascript！我建议你搜索'垂直居中的div'。

关于你的代码的评论是一团糟，好吧，10年前它将是你编码的方式。现在，CSS使事情变得更容易，但你需要花一些时间来学习它和不同的浏览器怪癖。祝你好运，请发布更新！

CSS - 将所有DIV设置为居中

4 个答案:

body {width：100％;}