CSS 對齊(Align)
CSS?水平對齊(Horizo??ntal Align)
在CSS中，有幾個屬性用於元素水平對齊。
區(qū)塊元素對齊
區(qū)塊元素是一個元素，佔用了全寬，前後都是換行符號。
區(qū)塊元素的範(fàn)例：
<h1>
<p>
<div>
在這一章中，我們會告訴你區(qū)塊元素如何水平對齊佈局。中心對齊,使用margin屬性
#區(qū)塊元素可以把左，右頁邊距設(shè)定為"自動"對齊。 margin屬性可任意拆分為左，右頁邊距設(shè)定自動指定，結(jié)果都是出現(xiàn)居中元素：
##實例# <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個人的痛苦要找人傾訴，一個人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會峰回路轉(zhuǎn);許多夢，看淡了，便會云開日出。學(xué)會思索，學(xué)會珍藏，微笑領(lǐng)悟，默默堅強。</p>
</body>
</html>提示:?如果寬度是100％，對齊是沒有效果的。
運行程式嘗試
使用position屬性設(shè)定左，右對齊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color: #4ce667;
}
</style>
</head>
<body>
<div class="right">
<p>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個人的痛苦要找人傾訴，一個人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會峰回路轉(zhuǎn);許多夢，看淡了，便會云開日出。學(xué)會思索，學(xué)會珍藏，微笑領(lǐng)悟，默默堅強。</p>
</div>
</body>
</html>注意###：絕對定位與文件流程無關(guān)，所以它們可以覆蓋頁面上的其它元素。 ######運行程式嘗試###############使用float屬性設(shè)定左，右對齊############使用float屬性是對齊元素的方法之一：###
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個人的痛苦要找人傾訴，一個人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會峰回路轉(zhuǎn);許多夢，看淡了，便會云開日出。學(xué)會思索，學(xué)會珍藏，微笑領(lǐng)悟，默默堅強。</p>
</div>
</body>
</html>###執(zhí)行程式嘗試############################## 
