您好，我设计了一个论坛，但我遇到的主要问题是页面无法居中。
我将主要元素设置为margin: 0 auto;它没有帮助，当然设置为margin-left:auto和margin-right:auto没有一个有用。
我的HTML代码在这里：
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="main"><!--Begin Main-->
<div class="container"><!--Begin container-->
<div id="header"><!--Begin Header-->
<ul id="menu" >
<li><img src="images/mark.png" /><a href="#">Login</a></li>
<li> <img src="images/mark.png"><a href="#">Register</a></li>
</ul>
<ul >
<li> <img src="images/mark.png"/><a href="#">FAQ</a></li>
<li><img src="images/mark.png" /><a href="#">Search</a></li>
</ul>
<div style="clear:both;"></div>
<div id="logo"><!--Begin Logo-->
<h1>BLOOMSKIN</h1>
</div><!--End logo-->
<div id="tagline"><!--Begin Tagline-->
<h2>Your Forum</h2>
<div/><!--end Tagline-->
</div><!-- End header-->
<div id="position"><!--Begin Position-->
<h5 style="float:left;"><a href="#">View unanswered post </a></h5>
<h5> |<a href="#"> View active topics</a></h5>
<h5 id="date_time">it is a current time Thus jun 09,2011 11:10am</h5>
</div><!--end Position-->
</div><!--End Header-->
<div style="clear:both;"></div>
<div id="content"><!--Begin Content-->
<div id="hold_white_content">
<div style="padding-bottom:15px;"></div>
<div id="content_of_category">
<h3 id="category">Category</h3>
<div class="Form_Header">
<h4 id="Furom_Format">Forum</h4>
<h5 id="Set_status">Status</h5>
<h5 id="Set_status">Last Post Info</h5>
</div>
<div style="clear:both"></div>
<div id="title_exam">
<h2>Title Example</h2>
<h3>5 Topic</h3>
<img src="images/Rec_Another.png" style="float:left;"/>
<h4>Another title example</h4>
</div>
<div style="clear:both"></div>
<div id="desc">
<h4><i>This is a description of post</i></h4>
<h3>25 Replies</h3>
<h5><i>By Hussein39 At Thus,2011,jun <br> 20 17:48 AM</i></h5><hr style="text-shadow:#999" />
</div>
<div id="title_exam">
<h2>Title Example</h2>
<h3>5 Topic</h3>
<img src="images/Rec_Another.png" style="float:left;"/>
<h4>Another title example</h4>
</div>
<div style="clear:both"></div>
<div id="desc">
<h4><i>This is a description of post</i></h4>
<h3>25 Replies</h3>
<h5><i>By Hussein39 At Thus,2011,jun <br> 20 17:48 AM</i></h5><hr style="text-shadow:#999" />
</div>
<div id="title_exam">
<h2>Title Example</h2>
<h3>5 Topic</h3>
<img src="images/Rec_Another.png" style="float:left;"/>
<h4>Another title example</h4>
</div>
<div style="clear:both"></div>
<div id="desc">
<h4><i>This is a description of post</i></h4>
<h3>25 Replies</h3>
<h5><i>By Hussein39 At Thus,2011,jun <br> 20 17:48 AM</i></h5><hr style="text-shadow:#999" />
</div>
<div id="title_exam">
<h2>Title Example</h2>
<h3>5 Topic</h3>
<img src="images/Rec_Another.png" style="float:left;"/>
<h4>Another title example</h4>
</div>
<div style="clear:both"></div>
<div id="desc">
<h4><i>This is a description of post</i></h4>
<h3>25 Replies</h3>
<h5><i>By Hussein39 At Thus,2011,jun <br> 20 17:48 AM</i></h5>
</div>
<div style="padding-bottom:20px;"></div>
</div>
<div style="padding-bottom:15px;"></div>
</div>
</div>
<div id="new_topic_button">
</div>
</div><!--End Content-->
<div id="button">
<a href="#">New Topic</a>
</div>
<div id="footer"><!-- Begin Footer-->
<div id="login"><!--Begin login-->
<h3>LOGIN</h3>
<hr class="line">
<ul id="login_info">
<li>UserName:</li>
<li><input type="text" name="username" class="textbox"/></li>
<li>Password:</li>
<li><input type="text" name="password" class="textbox"/></li>
<li> | Log me on automatically each visit</li>
<li> <input type="checkbox" id="checkbox" /></li>
<li> <input type="button" value="Log in" id="loginbutton"/></li>
</ul>
</div><!--End login section-->
<div style="clear:both"></div>
<div id="status"><!-- Begin Who is online section-->
<h3>Who is Online</h3>
<hr class="line" />
<p>In total there are 2 users online: 4 registered 1 hidden and 5 guests (base on users active over the past 6 minutes)
Most users ever online was 12 on sat 24th june,2010 6:59 pm</p>
<div id="reg_user">Register users: No Registered users</div>
<div id="legend">
Legend: <a id="admin" href="#">Administrator</a>
<a id="general" href="#">, Global moderators</a>
</div>
</div><!--End Status Who is online section-->
</div><!--End footer Section-->
</div><!--End container-->
</div><!--End main-->
</body>
</html>
我的css代码在这里：
*{ margin:0;
padding:0;}
#main
{
width:800px;
margin-left:auto;
margin-right:auto;
}
body{background-color:#000; color:#FFF;}
#header
{
background:url(images/header.png) no-repeat;
}
#header li
{
list-style-type:none;
float:left;
padding-left:20px;
padding-top:20px;
padding-bottom:50px;
}
#header li a
{ text-decoration:none; font-family:"MS Serif", "New York", serif
font-size:18px; font-weight:700; color:#FFF; margin-top:10px; padding-left:5px;}
#header li img
{
height:25px;
width:25px;
vertical-align:middle;
}
#menu
{
float:left;
padding-right:250px;
}
#logo h1
{
font-family:"Gill Sans Ultra Bold Condensed";
font-size:43px;
font-weight:bold;
}
#tagline h2
{
font-family:"Monotype Corsiva"; font-size:36px;
padding-bottom:30px;
}
#position h5
{
float:left;
padding-bottom:30px;
}
#position h5 a
{
text-decoration:none;
color:#FFF;
}
#date_time
{ padding-left:150px;}
#hold_white_content
{
-moz-border-radius:10px;
background-color:#FFF;
width:670px;
height:auto;
color:#000;
}
#content_of_category
{
background:url(images/cat_header.png) repeat-x #e0e0e0;
width:630px;
border:1px solid #000;
margin:auto;
height:auto;
border-bottom-right-radius:15px 15px;
border-bottom-left-radius: 15px 15px;
}
#Set_status
{
float:left;
padding-left:10px;
padding-top:0px;
}
/*#content_of_category h4{float:left;padding-top:20px; padding-left:10px; font-size:12px;}*/
#category{ padding-top:10px; padding-left:10px; }
#Furom_Format{ float:left; font-size:12px;}
.Form_Header {padding-top:25px; padding-left:10px;}
#Set_status{ padding-left:190px;}
#title_exam
{padding-top:20px; padding-left:10px;}
#title_exam h2
{
font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:16px; color:#77c8df;
float:left;
}
#title_exam h3
{
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#000;
float:left;
padding-left:130px; padding-right:60px;
}
#title_exam h4{color:#58b8e1;}
#title_exam img{ padding-left:90px; }
#desc h4{ float:left; padding-left:10px; font-size:14px; ; font-weight:100; text-align:center;}
#desc h3{float:left; font-size:14px; font-weight:700; padding-left:70px; padding-right:120px;}
#desc h5{ float:left font-size:12px; ; font-weight:100; text-align:center; color:#9a9c9c;}
#button
{
background:url(images/button.png) no-repeat;
height:46px;
padding-top:10px;
margin-top:15px;
margin-left:15px;
margin-bottom:20px;
}
#button a
{
text-decoration:none;
font-family:"Gill Sans Ultra Bold Condensed";
font-weight:bold;
color:#f6f6f6;
padding-left:35px;
}
#login ul{list-style-type:none; padding-top:10px; padding-left:5px;}
#login ul li
{
float:left;
}
.textbox
{
width:100px;
margin-left:2px;
margin-right:10px;
}
#checkbox
{
margin-left:2px;
}
#loginbutton
{
margin-left:10px;
}
.line
{
border-color:#03F;
width:650px;
}
#status
{
padding-top:50px;
width:650px;
}
#status p{ padding-left:5px; line-height:25px;}
#reg_user
{
padding-top:50px;
}
#legend
{ padding-top:20px;
}
#admin
{
text-decoration:none;
color:#F00;
}
#general
{
text-decoration:none;
color:#0F0;
}
答案 0 :(得分：1)
你必须做 -
#main{
margin:0px auto;
}
它也适用于IE。
答案 1 :(得分：0)
使用正确的doctype并使用以下CSS即可。
body {
width:100%;
margin:0 auto;
}
“宽度”必须使浏览器中的整个内容居中对齐。
答案 2 :(得分：0)
如果你有一个固定的宽度，你可以这样做：
#main {
width: 800px;
margin-left: -400px;
position: absolute;
left: 50%;
}
以下是一个示例：http://jsfiddle.net/nXMsC/
左边距必须是元素总宽度的一半。如果元素宽度为800px并且具有16px填充，则半宽度可以是416px，具体取决于您的盒子型号。
答案 3 :(得分：-1)
您好现在定义正文 text-align:center这只是即
和#main定义text-align:left;
就像这样
body{
text-align:center; // only for ie
}
#main{
text-align:left;
margin:0 auto; // for latest browsers
}
答案 4 :(得分：-1)
我正在使用这个＆amp;我希望它也适用于所有浏览器
#main {
margin:0 auto;
}
或者您也可以使用<center>标记，但为此，您应该在所有页面中都包含此标记。
<body>
<center>
Your Page Content
</center>
</body>