代码改变世界

css layout ：center

2012-08-22 21:33  youxin  阅读(313)  评论(0)  编辑  收藏  举报 
<!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>无标题文档</title>
<style type="text/css">
body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    color: #ccc;
    background-color: #333;
}
#content{
     
    padding:10px;
    margin:20px auto;
    background: #666;
    border: 5px solid #ccc;
     text-align:left; 
   
    width:370px;
}
</style>
</head>

<body>
<div id="content">
<pre>

body {
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px;
    font-family: verdana, arial, helvetica, sans-serif;
    color: #ccc;
    background-color: #333;
    text-align: center;
    /* part 1 of 2 centering hack */
    }
#content {
    width: 400px; 
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;     
    /* opera does not like 'margin:20px auto' */
    background: #666;
    border: 5px solid #ccc;
    text-align:left; 
    /* part 2 of 2 centering hack */
    width: 400px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 370px;
    }
html>body #content {
    width: 370px; /* ie5win fudge ends */
    }
</pre>

<div align="right"><p><a href="css/01_centered_box.css">[full css]</a></p></div>

</div>

</body>
</html>

显示如下：

http://www.thenoodleincident.com/tutorials/box_lesson/basic_centered.html

还可以这样：

设置

body{
     margin:0 auto;
    width:750px;
    border:5px solid red;
}

一定要设置width。