CSS Align(對齊)


CSS 水平對齊(Horizo​​ntal Align)

#在CSS中，有幾個屬性用於元素層級對齊。

區塊元素對齊

區塊元素是一個元素，佔用了全寬，前後都是換行符。

區塊元素的範例：

  • <h1>

  • <p>

<div>

文字對齊，請參閱 CSS文字

章節。 .

在這一章中，我們會告訴你區塊元素如何水平對齊佈局。

中心對齊,使用margin屬性

區塊元素可以把左，右頁邊距設定為"自動"對齊。

Note:
在IE8中使用margin:auto屬性無法正常運作，除非宣告

!DOCTYPE

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>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已经声明.</p>
</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

#提示:

如果寬度是100％，對齊是沒有效果的。

注意：

IE5中區塊元素有一個margin處理BUG。為了使上述例子能工作，在IE5中，需要添加一些額外的程式碼。 實例

使用position屬性設定左，右對齊

元素對齊的方法之一是使用絕對定位：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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中文网(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中文网(php.cn)</title> 
<style>
.center {
    padding: 70px 0;
    border: 3px solid green;
}
</style>
</head>
<body>

<h2>垂直居中</h2>
<p>以上实例，我们使用 padding 属性实现元素的垂直居中：</p>

<div class="center">
  <p>我是垂直居中的。</p>
</div>

</body>
</html>
#########運行實例?######點擊"運行實例" 按鈕查看線上實例### ###

如果要水平和垂直都居中，可以使用 padding 和 text-align: center: 

我是水平和垂直都居中的。

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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中文网(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中文网(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 翻轉章節。

Crossbrowser相容性問題

類似這樣的元素對齊時，預先確定margin和元素的填充，始終是一個好主意。這是為了避免在不同的瀏覽器中的可視化差異。

IE8和早期有一個問題，當使用float屬性時。如果一個容器元素（在本例中<div class="container">）指定的寬度，!DOCTYPE聲明是缺失，IE8和早期版本會在右邊增加17px的margin。這似乎是一個滾動的預留空間。使用float屬性時始終設定在DOCTYPE聲明中！

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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浏览器产生奇怪的结果。</p>
</div>

</body>
</html>

執行實例 »

點擊 "執行實例" 按鈕查看線上實例