CSS 水平對齊(Horizontal Align)
CSS 水平對齊(Horizontal Align)
區塊元素對齊
區塊元素是一個元素，佔用了全寬，前後都是換行符。
區塊元素的例子：
<h1>
<p>
<div>
##在這一章中，我們會告訴你塊元素如何水平對齊佈局。
中心對齊,使用margin屬性
區塊元素可以把左，右頁邊距設定為"自動"對齊。
Note: 在IE8中使用margin:auto屬性無法正常運作，除非宣告 !DOCTYPE
margin屬性可任意拆分為左，右頁邊距設定自動指定，結果都是出現居中元素：
實例
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}提示: 如果寬度是100％，對齊是沒有效果的。
注意：IE5中區塊元素有一個margin處理BUG。為了使上述例子能工作，在IE5中，需要添加一些額外的程式碼。
Crossbrowser 相容性問題
<p類似這樣的元素對齊時，預先確定margin和元素的填充，始終是一個好主意。這是為了避免在不同的瀏覽器中的可視化差異。
IE8和早期有一個問題，當使用position屬性。如果一個容器元素（在本例中<div class="container">）指定的寬度，!DOCTYPE聲明是缺失，IE8和早期版本會在右邊增加17px的margin。這似乎是一個滾動的預留空間。使用position屬性時始終設定在DOCTYPE聲明中！
使用float屬性設定左，右對齊
使用float屬性是對齊元素的方法之一：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>凡是到达了的地方，都属于昨天。哪怕那山再青，那水再秀，那风再温柔。带深的流连便成了一种羁绊，绊住的不仅是双脚，还有未来。</p>
<p>怎麽能不喜欢出发呢？没见过大山的巍峨，真是遗憾；见了大山的巍峨没见过大海的浩翰，仍然是遗憾；
见了大海的浩翰没见过大漠的广袤，依旧遗憾；见了大漠的广袤没见过森林的神秘，还是遗憾。世界上有不绝的风景，我有不老的心情。</p>
</div>
</body>
</html>Crossbrowser相容性問題
類似這樣的元素對齊時，預先確定margin和元素的填充，始終是一個好主意。這是為了避免在不同的瀏覽器中的可視化差異。
IE8和早期有一個問題，當使用float屬性時。如果一個容器元素（在本例中<div class="container">）指定的寬度，!DOCTYPE聲明是缺失，IE8和早期版本會在右邊增加17px的margin。這似乎是一個滾動的預留空間。使用float屬性時始終設定在DOCTYPE聲明中！
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>当使用浮动属性对齐,总是包括!DOCTYPE声明!如果丢失,它将会在IE浏览器产生奇怪的结果。</p>
</div>
</body>
</html>
