CSS 對齊(Align)
CSS 水平對齊(Horizontal Align)
在CSS中，有幾個屬性用於元素水平對齊。
區塊元素對齊
區塊元素是一個元素，佔用了全寬，前後都是換行符號。
區塊元素的範例：
<h1>
<p>
<div>
在這一章中，我們會告訴你區塊元素如何水平對齊佈局。中心對齊,使用margin屬性
#區塊元素可以把左，右頁邊距設定為"自動"對齊。 margin屬性可任意拆分為左，右頁邊距設定自動指定，結果都是出現居中元素：
##實例# <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。 青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</body>
</html>提示: 如果寬度是100％，對齊是沒有效果的。
運行程式嘗試
使用position屬性設定左，右對齊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color: #4ce667;
}
</style>
</head>
<body>
<div class="right">
<p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。 青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</div>
</body>
</html>注意###：絕對定位與文件流程無關，所以它們可以覆蓋頁面上的其它元素。 ######運行程式嘗試###############使用float屬性設定左，右對齊############使用float屬性是對齊元素的方法之一：###
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。 青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</div>
</body>
</html>###執行程式嘗試############################## 
