CSS 水平對(duì)齊(Horizontal Align)
CSS 水平對(duì)齊(Horizontal Align)
塊元素對(duì)齊
塊元素是一個(gè)元素，占用了全寬，前后都是換行符。
塊元素的例子：
<h1>
<p>
<div>
在這一章中，我們會(huì)告訴你塊元素如何水平對(duì)齊布局。
中心對(duì)齊,使用margin屬性
塊元素可以把左，右頁邊距設(shè)置為"自動(dòng)"對(duì)齊。
Note:?在IE8中使用margin:auto屬性無法正常工作，除非聲明?!DOCTYPE
margin屬性可任意拆分為左，右頁邊距設(shè)置自動(dòng)指定，結(jié)果都是出現(xiàn)居中元素：
實(shí)例
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}提示:?如果寬度是100％，對(duì)齊是沒有效果的。
注意：IE5中塊元素有一個(gè)margin處理BUG。為了使上述例子能工作，在IE5中，需要添加一些額外的代碼。
Crossbrowser 兼容性問題
<p類似這樣的元素對(duì)齊時(shí)，預(yù)先確定margin和元素的填充，始終是一個(gè)好主意。這是為了避免在不同的瀏覽器中的可視化差異。
IE8和早期有一個(gè)問題，當(dāng)使用position屬性時(shí)。如果一個(gè)容器元素（在本例中<div class="container">）指定的寬度，!DOCTYPE聲明是缺失，IE8和早期版本會(huì)在右邊增添17px的margin。這似乎是一個(gè)滾動(dòng)的預(yù)留空間。使用position屬性時(shí)始終設(shè)置在DOCTYPE聲明中！
使用float屬性設(shè)置左，右對(duì)齊
使用float屬性是對(duì)齊元素的方法之一：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>凡是到達(dá)了的地方，都屬于昨天。哪怕那山再青，那水再秀，那風(fēng)再溫柔。帶深的流連便成了一種羈絆，絆住的不僅是雙腳，還有未來。</p>
<p>怎麼能不喜歡出發(fā)呢？沒見過大山的巍峨，真是遺憾；見了大山的巍峨沒見過大海的浩翰，仍然是遺憾；
見了大海的浩翰沒見過大漠的廣袤，依舊遺憾；見了大漠的廣袤沒見過森林的神秘，還是遺憾。世界上有不絕的風(fēng)景，我有不老的心情。</p>
</div>
</body>
</html>Crossbrowser兼容性問題
類似這樣的元素對(duì)齊時(shí)，預(yù)先確定margin和元素的填充，始終是一個(gè)好主意。這是為了避免在不同的瀏覽器中的可視化差異。
IE8和早期有一個(gè)問題，當(dāng)使用float屬性時(shí)。如果一個(gè)容器元素（在本例中<div class="container">）指定的寬度，!DOCTYPE聲明是缺失，IE8和早期版本會(huì)在右邊增添17px的margin。這似乎是一個(gè)滾動(dòng)的預(yù)留空間。使用float屬性時(shí)始終設(shè)置在DOCTYPE聲明中！
實(shí)例
<!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>當(dāng)使用浮動(dòng)屬性對(duì)齊,總是包括!DOCTYPE聲明!如果丟失,它將會(huì)在IE瀏覽器產(chǎn)生奇怪的結(jié)果。</p>
</div>
</body>
</html>
