設定方法：1、使用「margin:0px auto」語句設定水平對齊；2、使用position屬性，配合top、bottom、left和right屬性設定左或右對齊；3、使用「float: right|left」語句設定左或右對齊。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
1、使用 margin 屬性來水平對齊
可透過將左邊距和右邊距設為「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 屬性進行左和右對齊
使用這種方法在兼容性這一塊無疑是最好的方法了，但當使用position 屬性時，請始終設定! DOCTYPE 聲明，在IE8 以及更早的版本存在一個問題。如果容器元素（在我們的案例中是
<!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 屬性來進行左和右對齊
當使用 float 屬性時，IE8 以及更早的版本存在一個問題。如果省略 !DOCTYPE 聲明，那麼 IE8 以及更早的版本會在右側增加 17px 的外邊距。這似乎是為滾動條預留的空間。當使用 float 屬性時，請始終設定 !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>
推薦學習：css影片教學
#以上是css如何設定對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！
