一列固定寬度居中佈局

admin發表於2018-08-06

一列固定寬度是最為簡單的佈局，實現原理如下：

（1）.通過width屬性設定元素寬度。

（2）.然後通過margin:0 auto將元素在其父元素中設定為居中狀態。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  margin: 0;
  padding: 0;
  font-size: 30px
}
.head,
.main,
.footer {
  width:960px;
  margin:0 auto;
  text-align: center;
  font-weight:bold;
}
.head {
  height:100px;
  background:#ccc;
}
.main {
  height:600px;
  background:#FCC;
}
.footer {
  height:50px;
  background:#9CF;
}
</style>
</head>
<body>
  <div class="head">head</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</body>
</html>

上面實現了上中下居中佈局效果，更多內容參閱相關閱讀：

（1）.設定寬度參閱CSS 元素尺寸一章節。

（2）.div居中參閱CSS div居中效果一章節。

相關文章