站長資訊網(wǎng)設(shè)置方法：1、使用“margin:0px auto”語句設(shè)置水平對齊；2、使用position屬性，配合top、bottom、left和right屬性設(shè)置左或右對齊；3、使用“float:right|left”語句設(shè)置左或右對齊。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
1、使用 margin 屬性來水平對齊
可通過將左邊距和右邊距設(shè)置為“auto”來對齊元素。但前提是必須聲明！DOCTYPE，否則在IE8是無效的。這樣就可以居中元素了，例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> div{ margin: 0px auto; width: 70%; height: 300px; background-color: red; } </style> </head> <body> <div></div> </body> </html>
提示：如果寬度是 100%，則對齊沒有效果。
2、使用 position 屬性進行左和右對齊
使用這種方法在兼容性這一塊無疑是最好的方法了，但當(dāng)使用 position 屬性時，請始終設(shè)置 !DOCTYPE 聲明，在IE8 以及更早的版本存在一個問題。如果容器元素（在我們的案例中是 <div class="container">）設(shè)置了指定的寬度，并且省略了 !DOCTYPE 聲明，那么 IE8 以及更早的版本會在右側(cè)增加 17px 的外邊距。例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> body{ margin: 0; padding: 0; } .container{ position: relative; width: 100%; } .right{ position: absolute; right: 0px; width: 300px; height: 50px; background-color: red; } </style> </head> <body> <div class="container"> <div class="right"></div> </div> </body> </html>
3、使用 float 屬性來進行左和右對齊
當(dāng)使用 float 屬性時，IE8 以及更早的版本存在一個問題。如果省略 !DOCTYPE 聲明，那么 IE8 以及更早的版本會在右側(cè)增加 17px 的外邊距。這似乎是為滾動條預(yù)留的空間。當(dāng)使用 float 屬性時，請始終設(shè)置 !DOCTYPE 聲明：例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> body{ margin: 0; padding: 0; } .right{ float: right; width: 300px; height: 50px; background-color: red; } </style> </head> <body> <div class="container"> <div class="right"></div> </div> </body> </html>
推薦學(xué)習(xí)：css視頻教程
