Question

我有一个包含背景图片的div id。图像的宽度为1020px，这正是我想要div盒的大小。我想将它集中在标题下面的页面上，但我不希望表格或其中的任何文本居中。我认为我可以为表格和div id中的其他元素创建div id / class以使它们以不同方式对齐，但我仍然无法将div id设置为居中。我已经尝试了text-align：center属性，但我没有运气。

这是我的CSS：

@charset "utf-8";
/* CSS Document */

body {
    background:url(img/background_texture.jpg) no-repeat center center fixed; 
  background-size: cover;
}

#header {
    text-align: center;
    padding: 0px;
    margin: 0px;
}

#header img {
    vertical-align: bottom;
}

#content {
    background-image:url(img/ContentBox.png);
    background-repeat: no-repeat;
    background-position:center;
    padding: 0;
    margin: 0;
    width: 1020px;
}

这是基本的html结构

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Metra Train Schedule</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>

<body>

<div id="header"><img src="img/Header.jpg" /></div>

<div id="content">

    <table>
    </table>

    <table>
    </table>

</div>

</body>
</html>

这是浏览器预览，你可以在这里看到我正在谈论的内容。

enter image description here

Answer 1

边距自动，当与宽度小于屏幕的100％一起使用时，将使元素居中。如果您将margin: 0 auto;添加到#content的css中，它应该可以解决问题：

#content {
    ...
    margin: 0 auto;
}

此处有更多信息：http://learnlayout.com/margin-auto.html

Answer 2

div {text-align:center;}不适用于DIVS。常见的错误。

使用这个INSTEAD：

div {width:1020px;margin-left:auto;margin-right:auto}

默认情况下，“自动”会强制每侧的边距为页面剩余空间的一半。这不会使div中的任何内容居中。它将非常适合您。

Answer 3

如果您向其添加margin-left: auto，则可以使用margin-right: auto和display: block自动居中图像。

#header img {
  display: block;
  margin: 0 auto; /* shorthand for left, right auto and top,bottom 0
}

<强> Live demo (click).

也许您想将所有正文html包装在一个容器中并按照这种方式设置样式？

#container {
  width: 1020px;
  margin: 0 auto;
}

<强> Live demo (click).

居中div id

3 个答案: