Question

所以我想集中我的网站，但我真的不知道该怎么做。我在HTML中的容器div中尝试align="center"，但它没有用。

我的另一个想法是将页眉和页脚的宽度更改为min-width并且它有效。然后，我尝试将width中间列（col2）设置为min-width以使其展开。但它也没有用，因为它对col2的宽度没有任何作用。将float:right添加到col3也不起作用。现在我不知道该怎么做。

HTML

<!Doctype html>
<html>
<head>
  <meta charset = "utf-8"></meta>
  <title>Site</title>
  <link rel = "Stylesheet" type = "text/css" href = "style.css">
</head>
<body>
  <div id = "container" >
    <div id = "header">header</div>
    <div id = "col1" >col1</div>
    <div id = "col2" >col2</div>
    <div id = "col3" >col3</div>
    <div id = "footer">footer</div>
  </div>
</body>
</html>

CSS

body{
  background-color: red;
}
#container{

}
#header{
  width:1000px; /*min-width:1000px*/
  background-color:white;
  height:100px;
}
#col1{ 
  width:300px;
  height:100px;
  background-color:white;
  float:left;
}
#col2{
  width:400px; /*min-width:400px;*/
  height:100px;
  background-color:blue;
  float:left;
}
#col3{
  width:300px;
  height:100px;
  background-color:white;
  float:left; /*float:right; */
}
#footer{
  clear:both;
  background-color:white;
  width:1000px; /*min-width:1000px; */
  height:100px;
}

Answer 1

试试这个：

#container{

    width: 100%;
    max-width: 1000px;
    margin: 0 auto;

}

Answer 2

您可以使用：

#divClass{
   width: 100%;     
   max-width: 1000px;     
   margin: 0 auto; 
 }

如何集中我的网站？

2 个答案: