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 に答える