CSS 對齊(Align)
CSS 水平對齊(Horizontal Align)
在CSS中，有幾個屬性用于元素水平對齊。
塊元素對齊
塊元素是一個元素，占用了全寬，前后都是換行符。
塊元素的例子：
<h1>
<p>
<div>
在這一章中，我們會告訴你塊元素如何水平對齊布局。
中心對齊,使用margin屬性
塊元素可以把左，右頁邊距設(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>運行程序嘗試一下
