close
對齊塊元素
塊元素指的是佔據全部可用寬度的元素，並且在其前後都會換行。
塊元素的例子：
<h1> <p> <div>
使用margin 屬性來水平對齊
可通過將左和右外邊距設置為"auto"，來對齊塊元素。
註釋：除非已經聲明了!DOCTYPE，否則使用margin:auto在IE8以及更早的版本中是無效的。
把左和右外邊距設置為auto，規定的是均等地分配可用的外邊距。結果就是居中的元素：
實例
.center
{
<code>margin-left:auto;
margin-right:auto;</code>
width:70%;
background-color:#b0e0e6;
}
提示：如果寬度是100%，則對齊沒有效果。
使用position 屬性進行左和右對齊
對齊元素的方法之一是使用絕對定位：
實例
.right
{
<code>position:absolute;</code>
right:0px;
width:300px;
background-color:#b0e0e6;
}
註釋：絕對定位元素會被從正常流中刪除，並且能夠交疊元素。
跨瀏覽器兼容性問題
當像這樣對齊元素時，對<body> 元素的外邊距和內邊距進行預定義是一個好主意。這樣可以避免在不同的瀏覽器中出現可見的差異。
當使用position 屬性時，IE8 以及更早的版本存在一個問題。如果容器元素（在我們的案例中是<div class="container">）設置了指定的寬度，並且省略了!DOCTYPE 聲明，那麼IE8 以及更早的版本會在右側增加17px 的外邊距。這似乎是為滾動條預留的空間。當使用position 屬性時，請始終設置!DOCTYPE 聲明：
實例
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
使用float 屬性來進行左和右對齊
對齊元素的另一種方法是使用float 屬性：
實例
.right
{
<code>float:right;</code>
width:300px;
background-color:#b0e0e6;
}
跨瀏覽器兼容性問題
當像這樣對齊元素時，對<body> 元素的外邊距和內邊距進行預定義是一個好主意。這樣可以避免在不同的瀏覽器中出現可見的差異。
當使用float 屬性時，IE8 以及更早的版本存在一個問題。如果省略!DOCTYPE 聲明，那麼IE8 以及更早的版本會在右側增加17px 的外邊距。這似乎是為滾動條預留的空間。當使用float 屬性時，請始終設置!DOCTYPE 聲明：
實例
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
文章標籤
全站熱搜
留言列表
HTML教學課程 (5)
