0

嗨，我正在尝试为我的网站制作维护页面，但是当我尝试通过使用将主要内容 div 放在中间时，margin: auto;它似乎保持在顶部，唯一的方法是使用<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;
}
4

1 回答 1

0

垂直居中将不起作用，因为没有任何东西可以居中 -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;
}

为您的乐趣而摆弄。

于 2013-04-23T20:59:41.210 回答