0

我正在设计一个网站，这是我上传之前需要的最后一块。我搜索了这个网站和许多其他网站，但老实说我找不到正确的解决方案。我会尽可能具体。

www.solarfields.com 这是一个很好的例子。我想在网页中间对齐我的内容，就像他的一样。然而，他使用 Flash，我想保留 HTML 和 CSS。我已将我网站的整个正文包含在具有以下属性的标签中：

#body {
    position:absolute;
    top:13%;
    left:25%;
    width:350px;
}

它以我的显示器 (1600x900) 为中心，但我希望它以所有分辨率为中心。

尺寸：525 像素（高）x 350 像素（宽）。

我不止一个<div>。

我不在乎浏览器的兼容性。

我不想要可见的边框。

有一张 801px 宽的桌子。它有两个<td>，29px 和 762px 宽。

我是 CSS 菜鸟，所以我只是提供随机信息。如果您需要其他任何东西，请随时给我发电子邮件@mattjack66@gmail.com。

非常感谢，非常感谢。

4

3 回答 3

1

如果您margin: 0 auto;在一个也设置了宽度的 div 上进行设置，它将在其父容器中居中。

更具体地说，采用以下 css：

div#body {
    width:902px;  //Or whatever your content width is
    margin:0 auto;
    padding:0;
}

并将该类应用于您网站中最外层的 div：

<html>
    <body>
        <div id"body">
            ...The rest of your content...
        </div>
    </body>
</html>

这样做是将#body 的上下边距设置为0，左右边距自动分配它们之间的空白空间；哪个 div 在页面上居中。这适用于左/右中心。

于 2011-03-13T06:31:16.820 回答
1

水平和垂直居中：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
                body div {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    right: 0;
                }
                body div div {
                    position: relative;  
                    top: -262px;
                    height: 525px;                 
                    width: 350px;
                    margin: 0 auto 0;
                    background: #000;
                }
        </style>
    </head>
    <body>
        <div><div>Testing</div></div>
    </body>
</html>
于 2011-03-13T06:19:56.047 回答
0

解决方案：http: //jsfiddle.net/magicaj/Xd7sK/5/

水平居中很容易，您只需要margin:0 auto;在要居中的元素上进行设置。然而，让一个元素垂直居中要困难得多。有只有CSS 的解决方案可以模仿表格已经可以使用vertical-align:middle;CSS 执行的操作。我一直努力只将表格用于表格数据，但在这种情况下，我发现布局表格是可以接受的：

HTML：

<table class="wrapper">
    <tr>
        <td>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in  lobortis ante. Phasellus rhoncus, magna adipiscing consequat viverra,  nibh lectus eleifend neque, eget fermentum massa mauris id felis. Morbi  aliquet fermentum quam ut sollicitudin.
            </div>
        </td>
    </tr>
</table>

CSS：

html, body, .wrapper {
    height:100%;   
}

.wrapper {
    margin: 0 auto; /* center horizontally */
}

.wrapper td {
    height:100%;
    vertical-alignment: middle; /* center vertically */   
}

.content {
    width: 350px;
    background:#ccc;
}
于 2011-03-13T06:51:17.043 回答