CSS 對(duì)齊(Align)
CSS?水平對(duì)齊(Horizontal Align)
在CSS中，有幾個(gè)屬性用于元素水平對(duì)齊。
塊元素對(duì)齊
塊元素是一個(gè)元素，占用了全寬，前后都是換行符。
塊元素的例子：
<h1>
<p>
<div>
在這一章中，我們會(huì)告訴你塊元素如何水平對(duì)齊布局。
中心對(duì)齊,使用margin屬性
塊元素可以把左，右頁(yè)邊距設(shè)置為"自動(dòng)"對(duì)齊。
margin屬性可任意拆分為左，右頁(yè)邊距設(shè)置自動(dòng)指定，結(jié)果都是出現(xiàn)居中元素：
實(shí)例
<!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>人心靈的傷痛若無(wú)知己來(lái)?yè)嵛?，便?huì)荒蕪;人的歡樂(lè)若知己來(lái)共享，再多的快樂(lè)也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來(lái)排解。人若沒(méi)有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無(wú)反顧。世上本無(wú)事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開(kāi)了，便會(huì)峰回路轉(zhuǎn);許多夢(mèng)，看淡了，便會(huì)云開(kāi)日出。學(xué)會(huì)思索，學(xué)會(huì)珍藏，微笑領(lǐng)悟，默默堅(jiān)強(qiáng)。</p>
</body>
</html>提示:?如果寬度是100％，對(duì)齊是沒(méi)有效果的。
運(yùn)行程序嘗試一下
使用position屬性設(shè)置左，右對(duì)齊
元素對(duì)齊的方法之一是使用絕對(duì)定位：
<!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>人心靈的傷痛若無(wú)知己來(lái)?yè)嵛?，便?huì)荒蕪;人的歡樂(lè)若知己來(lái)共享，再多的快樂(lè)也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來(lái)排解。人若沒(méi)有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無(wú)反顧。世上本無(wú)事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開(kāi)了，便會(huì)峰回路轉(zhuǎn);許多夢(mèng)，看淡了，便會(huì)云開(kāi)日出。學(xué)會(huì)思索，學(xué)會(huì)珍藏，微笑領(lǐng)悟，默默堅(jiān)強(qiáng)。</p>
</div>
</body>
</html>注意：絕對(duì)定位與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素。
運(yùn)行程序嘗試一下
使用float屬性設(shè)置左，右對(duì)齊
使用float屬性是對(duì)齊元素的方法之一：
<!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>人心靈的傷痛若無(wú)知己來(lái)?yè)嵛?，便?huì)荒蕪;人的歡樂(lè)若知己來(lái)共享，再多的快樂(lè)也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來(lái)排解。人若沒(méi)有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無(wú)反顧。世上本無(wú)事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開(kāi)了，便會(huì)峰回路轉(zhuǎn);許多夢(mèng)，看淡了，便會(huì)云開(kāi)日出。學(xué)會(huì)思索，學(xué)會(huì)珍藏，微笑領(lǐng)悟，默默堅(jiān)強(qiáng)。</p>
</div>
</body>
</html>運(yùn)行程序嘗試一下
