我有一个包含背景图片的 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>
这是浏览器预览，你可以在这里更好地理解我在说什么。
最佳答案
div {text-align:center;} 不适用于 DIVS。常见错误。
改用这个:
div {width:1020px;margin-left:auto;margin-right:auto}
默认情况下，“auto”强制每边的边距为页面剩余空间的一半。这不会在 div 中居中任何内容。它将非常适合您。
关于html - 居中分割，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21419259/