国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Manual Dalam Talian CSS / CSS Align(對(duì)齊)

CSS Align(對(duì)齊)

CSS 水平對(duì)齊(Horizontal Align)


在CSS中,有幾個(gè)屬性用于元素水平對(duì)齊。


塊元素對(duì)齊

塊元素是一個(gè)元素,占用了全寬,前后都是換行符。

塊元素的例子:

  • <h1>

  • <p>

  • <div>

文本對(duì)齊,請(qǐng)參閱 CSS文本 章節(jié)。.

在這一章中,我們會(huì)告訴你塊元素如何水平對(duì)齊布局。


中心對(duì)齊,使用margin屬性

塊元素可以把左,右頁(yè)邊距設(shè)置為"自動(dòng)"對(duì)齊。

Note: 在IE8中使用margin:auto屬性無法正常工作,除非聲明 !DOCTYPE

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>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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

提示: 如果寬度是100%,對(duì)齊是沒有效果的。

注意:IE5中塊元素有一個(gè)margin處理BUG。為了使上述例子能工作,在IE5中,需要添加一些額外的代碼。 實(shí)例


使用position屬性設(shè)置左,右對(duì)齊

元素對(duì)齊的方法之一是使用絕對(duì)定位:

實(shí)例

<!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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

注意:絕對(duì)定位與文檔流無關(guān),所以它們可以覆蓋頁(yè)面上的其它元素。


使用float屬性設(shè)置左,右對(duì)齊

使用float屬性是對(duì)齊元素的方法之一:

實(shí)例

<!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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


使用Padding設(shè)置垂直居中對(duì)齊

CSS 中一個(gè)簡(jiǎn)單的設(shè)置垂直居中對(duì)齊的方式就是頭部頂部使用 padding:

我是垂直居中。

實(shí)例

<!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>以上實(shí)例,我們使用 padding 屬性實(shí)現(xiàn)元素的垂直居中:</p>

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

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

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

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

實(shí)例

<!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>以下實(shí)例,我們使用 padding 和 text-align 讓 div 元素的水平和垂直方向都居中:</p>

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

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


使用 line-height設(shè)置垂直居中

我是垂直居中的。

實(shí)例

<!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>以下實(shí)例中,我們讓 line-height 屬性值和 height 屬性值相等來設(shè)置 div 元素居中:</p>

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

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例



使用 position 和 transform設(shè)置垂直居中 

除了使用 padding 和 line-height 屬性外,我們還可以使用 transform 屬性來設(shè)置垂直居中:

實(shí)例

<!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>以下實(shí)例中,我們使用了 positioning 和 transform 屬性來設(shè)置水平和垂直居中:</p>

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

<p>注意: IE8 及更早版本不支持 transform 屬性。</p>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

提示: 更多 transform 屬性內(nèi)容可以參閱 2D 翻轉(zhuǎn)章節(jié)。


Crossbrowser兼容性問題

類似這樣的元素對(duì)齊時(shí),預(yù)先確定margin和元素的填充,始終是一個(gè)好主意。這是為了避免在不同的瀏覽器中的可視化差異。

IE8和早期有一個(gè)問題,當(dāng)使用float屬性時(shí)。如果一個(gè)容器元素(在本例中<div class="container">)指定的寬度,!DOCTYPE聲明是缺失,IE8和早期版本會(huì)在右邊增添17px的margin。這似乎是一個(gè)滾動(dòng)的預(yù)留空間。使用float屬性時(shí)始終設(shè)置在DOCTYPE聲明中!

實(shí)例

<!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>當(dāng)使用浮動(dòng)屬性對(duì)齊,總是包括!DOCTYPE聲明!如果丟失,它將會(huì)在IE瀏覽器產(chǎn)生奇怪的結(jié)果。</p>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例