【筆記】學習CSS佈局03——margin:auto;
阿新 • • 發佈：2018-11-30
#main {
width: 600px;
margin: 0 auto;
}設定塊級元素的 width 可以防止它從左到右撐滿整個容器。然後你就可以設定左右外邊距為 auto 來使其水平居中。元素會佔據你所指定的寬度，然後剩餘的寬度會一分為二成為左右外邊距。
唯一的問題是，當瀏覽器視窗比元素的寬度還要窄時，瀏覽器會顯示一個水平滾動條來容納頁面。讓我們再來改進下這個方案...
程式碼例項：
<!DOCTYPE html> <html> <head> <style type="text/css"> #main { width:500px; margin:0 auto; background-color: #65ca5c; } </style> </head> <body> <div id="main"> 設定塊級元素的 width 可以防止它從左到右撐滿整個容器。然後你就可以設定左右外邊距為 auto 來使其水平居中。元素會佔據你所指定的寬度，然後剩餘的寬度會一分為二成為左右外邊距。唯一的問題是，當瀏覽器視窗比元素的寬度還要窄時，瀏覽器會顯示一個水平滾動條來容納頁面。讓我們再來改進下這個方案... </div> </body> </html>
效果圖如下：
