Manual Dalam Talian CSS
/ CSS Align(對齊)
CSS Align(對齊)
CSS 水平對齊(Horizontal Align)
在CSS中，有幾個屬性用于元素水平對齊。
塊元素對齊
塊元素是一個元素，占用了全寬，前后都是換行符。
塊元素的例子：
<h1>
<p>
<div>
文本對齊，請參閱 CSS文本 章節(jié)。.
在這一章中，我們會告訴你塊元素如何水平對齊布局。
中心對齊,使用margin屬性
塊元素可以把左，右頁邊距設置為"自動"對齊。
Note: 在IE8中使用margin:auto屬性無法正常工作，除非聲明 !DOCTYPE
margin屬性可任意拆分為左，右頁邊距設置自動指定，結果都是出現(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>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
<p><b>注意: </b>使用 margin:auto無法兼容 IE8, 除非!DOCTYPE已經(jīng)聲明.</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
提示: 如果寬度是100％，對齊是沒有效果的。
注意：IE5中塊元素有一個margin處理BUG。為了使上述例子能工作，在IE5中，需要添加一些額外的代碼。 實例
使用position屬性設置左，右對齊
元素對齊的方法之一是使用絕對定位：
實例
<!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:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
注意：絕對定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素。
使用float屬性設置左，右對齊
使用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>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
使用Padding設置垂直居中對齊
CSS 中一個簡單的設置垂直居中對齊的方式就是頭部頂部使用 padding:
我是垂直居中。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>垂直居中</h2>
<p>以上實例，我們使用 padding 屬性實現(xiàn)元素的垂直居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
我是水平和垂直都居中的。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>以下實例，我們使用 padding 和 text-align 讓 div 元素的水平和垂直方向都居中:</p>
<div class="center">
<p>我是水平和垂直都居中的。</p>
</div>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
使用 line-height設置垂直居中
我是垂直居中的。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下實例中，我們讓 line-height 屬性值和 height 屬性值相等來設置 div 元素居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
使用 position 和 transform設置垂直居中
除了使用 padding 和 line-height 屬性外,我們還可以使用 transform 屬性來設置垂直居中:
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下實例中，我們使用了 positioning 和 transform 屬性來設置水平和垂直居中：</p>
<div class="center">
<p>我是水平和垂直居中的。</p>
</div>
<p>注意: IE8 及更早版本不支持 transform 屬性。</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
提示: 更多 transform 屬性內容可以參閱 2D 翻轉章節(jié)。
Crossbrowser兼容性問題
類似這樣的元素對齊時，預先確定margin和元素的填充，始終是一個好主意。這是為了避免在不同的瀏覽器中的可視化差異。
IE8和早期有一個問題，當使用float屬性時。如果一個容器元素（在本例中<div class="container">）指定的寬度，!DOCTYPE聲明是缺失，IE8和早期版本會在右邊增添17px的margin。這似乎是一個滾動的預留空間。使用float屬性時始終設置在DOCTYPE聲明中！
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>當使用浮動屬性對齊,總是包括!DOCTYPE聲明!如果丟失,它將會在IE瀏覽器產(chǎn)生奇怪的結果。</p>
</div>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例