我有完美的工作代码，它不能像我想要的那样工作......但是工作。
我想居中而不是浮动
这是工作代码：
我的.css：
* {
margin: 0;
padding: 0;
}
body { background: #ededed url(../images/bg.gif) repeat-x; }
p {
color: #999;
padding: 0;
margin: 10px 0;
font: 12px/18px Arial, Helvetica, sans-serif;
}
#container {
margin: auto;
width: 950px;
}
#header {
height: 302px;c
width: 950px;
float: left;
background: url(../images/header.gif) no-repeat;
}
#logo { margin-top: 60px; }
#logo h1 {
display: block;
float: left;
width: 503px;
height: 57px;
text-indent: -9999px;
}
#logo h1 a {
display: block;
width: 100%;
height: 100%;
outline: none;
background: url(../images/logo.png) no-repeat 0 0;
}
#navigation {
height: 38px;
width: 950px;
margin-top: 152px;
float: left;
}
.nav-links li {
display: inline;
padding: 3px 25px 0 0;
float: left;
}
.nav-links li a {
text-transform: capitalize;
color: #fff;
text-decoration: none;
letter-spacing: -1px;
font: bold 14px Arial, Helvetica, sans-serif;
}
.nav-links li a:hover { color: #ff0; }
.phone-number li {
float: right;
list-style-type: none;
text-transform: capitalize;
color: #fff;
letter-spacing: -1px;
padding-top: 3px;
font: normal 14px Arial, Helvetica, sans-serif;
}
h2 {
text-transform: capitalize;
color: #666;
letter-spacing: -1px;
padding-top: 7px;
font: bold 16px Arial, Helvetica, sans-serif;
}
.content-middle p { text-align: justify; }
#content-center {
float: right;
width: 322px;
margin-top: 20px;
}
.login-top {
float: left;
height: 32px;
width: 292px;
background: url(../images/sidebar_top.png) no-repeat;
padding: 4px 15px;
}
.login-middle {
float: left;
width: 290px;
padding: 5px 15px 0 15px;
border-right: 1px solid #d3d3d3;
border-left: 1px solid #d3d3d3;
background: #fff;
}
.login-middle p { text-align: justify; }
.login-bottom {
float: left;
height: 16px;
width: 322px;
margin-bottom: 15px;
background: url(../images/sidebar_bottom.png) no-repeat;
}
#footer {
clear: both;
height: 111px;
background: url(../images/footer.gif) repeat-x bottom;
}
#footer-content {
height: 91px;
width: 950px;
padding-top: 20px;
margin: auto;
}
#footer-content p {
color: #fff;
text-align: center;
padding-top: 35px;
}
.divbuttons{text-align: center;
}
.login{width:25%;}
.button {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
background-color:#89c403;
-moz-border-radius:9px;
-webkit-border-radius:9px;
border-radius:9px;
border:1px solid #74b807;
display:inline-block;
color:#ffffff;
font-family:Verdana;
font-size:14px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #528009;
}.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403) );
background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
background-color:#77a809;
}.button:active {
position:relative;
top:1px;}
我的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" />
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
<title>Pachonk - Home</title>
<base href="http://alex.piechowski.org/school/"></base>
<link href="css/admin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/layouts/inline.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<h1><a href="home">Pachonk - Your Assignments, anywhere!</a></h1>
</div>
<div id="navigation">
<ul class="nav-links">
<li><a href="home">home</a></li>
<li><a href="#">our schools</a></li>
<li><a href="#">applications</a></li>
<li><a href="#">about us</a></li>
<li><a href="contact">contact us</a></li>
</ul>
<ul class="phone-number">
<li>free quotation - 0800 123 456</li>
</ul>
</div>
</div>
<div id="content-center">
<div class="login-top">
<h2>Administrator Login:</h2>
</div>
<div class="login-middle">
<p>> Email confirmation upon register theming</p>
<p>> Dynamic nav bar</p>
<p>> Contact me form active</p>
<p>> Make logout.php a json response</p>
<p>> Error checking both server side and client side registration</p>
<p>> Log in using email OR username</p>
<p>> login box display more detials</p>
<p>> Password reset</p>
<p>> include files to memory save</p>
<p>> inline noty's on login/register.</p>
<p>> clean code</p>
<p>> admin side</p>
<p>> library for logcheck/admin check</p>
</div>
<div class="login-bottom">
</div>
</div>
</div>
<div id="footer">
<div id="footer-content">
<p>© Copyright
2013
Pachonk</p>
</div>
</div>
</body>
</html>
然后我尝试通过以下方式使 div 成为中心：
#content-center {
margin-left: auto ;
margin-right: auto ;
width: 322px;
margin-top: 20px;
}
但是它弄乱了上面的div。