Question

您好我正在尝试为我的网站制作维护页面但是当我尝试使用margin: auto;将主要内容div放在中间但是它似乎保持在顶部并且是拉动的唯一方法它是使用<br />，但我不想使用它，因为它看起来很乱，所以我想知道你是否有任何想法是什么错误

HTML：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>

<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising@chattrd.com</b></div>

<div class="topBar">
    <div class="topBarcontainer">
        <img class="logo" src="images/logo.png" alt="Chattrd home">
    </div>
</div>

<div id="navigationBar">
  <ul> 
    <li><a href="index.htm">Home</a></li> 
    <li><a href="aboutus.htm">About us</a></li> 
    <li><a href="contactus.htm">Contact us</a></li>
  </ul>
</div>
<div id="mainContent"></div>
</body>
</html>

CSS：

    body {
    background: #F7F7F7;
    font-family:Tahoma, Geneva, sans-serif;
    margin: 0;
    padding: 0;
}
.alert {
    font-size: 10px;
    color: #FFF;
    background: #1f1f1f;
    height: 14px;
    padding-left: 10px;
    font-family: Arial;
    white-space: nowrap
}
.topBar {
    background: #06C;
    height: 40px;
}
#navigationBar {
    background: #1f1f1f;
    height: 28px;
    color: white;
    font-family: 'Open Sans';
}
.topBarcontainer{
    margin: auto;
    width: 1000px;
}
.logo {
    padding: 7px;
    height: 24px;
    width: 98px;
}
#navigationBar ul { 
    margin: 0;
    padding: 3px;
    list-style-type: none;
    text-align: center;
    } 

#navigationBar ul li {  
    display: inline; 
    } 

#navigationBar ul li a { 
    text-decoration: none; 
    padding: .2em 1em; 
    color: #fff; 
    } 

#navigationBar ul li a:hover { 
    color: #FFF; 
    background-color: #06C;
    }
#mainContent {
    margin: auto;
    width: 500px;
    height: 200px;
    border: 1px solid #D8D8D8;
    border-radius: 5px;
    background: #E6E6E6;
}

Answer 1

垂直居中不起作用，因为没有任何内容 - body将像默认情况下的所有HTML元素一样，只是容纳其内容所需的高度。

由于您的主要内容是固定大小，您可以使用绝对定位来解决它：

#mainContent {
    width: 500px;
    height: 200px;
    position:fixed;
    left:50%;
    top:50%;
    margin:-100px 0 0 -250px;
    border: 1px solid #D8D8D8;
    border-radius: 5px;
    background: #E6E6E6;
}

Fiddled for your pleasure.

主要内容div坚持到顶部

1 个答案: