此練習探討不同的置中方法。要將一段文字或一張圖片放在矩形格子(box)的中央,最簡單的方法是用
TABLE 元素,然後在
TD 元素 宣告 text-align:center。vertical-align:middle 為預設值,所以可以免宣告。
<textarea id='SPtable' style='display:none'>
<style type='text/css'>
.tbl td {width:350px;
height:250px;
border:solid 1px red;
}
</style>
<table class=tbl>
<tr>
<td style='text-align:center'>
<img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</td>
</table>
</textarea>
<script type='text/javascript'>dumpSample('SPtable')</script>
單行文字的置中。以下方法都不使用 TABLE 元素,而是要在
DIV 元素 置中。單行文字的置中,其水平置中可用 text-align:center。垂直置中可以將 line-height 宣告與 height 相同,此法只能用在單行文字的情形。
<textarea id='SPline' style='display:none'>
<style type='text/css'>
.out1 {width:160px;
border:solid 1px red;
height:100px;
}
</style>
<div class=out1 style='text-align:center'>
<span>水平置中</span>
</div>
<div class=out1 style='line-height:100px'>
<span>垂直置中</span>
</div>
<div class=out1 style='text-align:center; line-height:100px'>
<span>中央</span>
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPline')</script>
區塊元素的置中。先要將子區塊元素設為 display:inline-block。水平置中可用 text-align:center。垂直置中可以將父元素 line-height 宣告與 height 相同,然後子區塊必須設成 vertical-align:middle;line-height:1em。為了在 IE6 達成垂直置中,還必須加上 margin:expression();此法使用
parentNode,
clientHeight 與數學函式
floor() 計算 margin。expression() 這行在個人電腦測試正常,可是移到部落格之後,會導致 IE6 停頓,所以用註解取消其功能;使用時請多測試。
<textarea id='SPblock' style='display:none'>
<style type='text/css'>
.blk {width:200px;
height:120px;
border:solid 1px red;
line-height:120px;
text-align:center;
}
.blk DIV {width:100px;
background:blue;
display:inline-block;
vertical-align:middle;
line-height:1em;
/* margin:expression(Math.floor( (this.parentNode.clientHeight-this.clientHeight)/2 )+'px auto'); */
}
</style>
<div class=blk>
<div>中央<br />中央</div>
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPblock')</script>
圖片的置中方法一。由於圖片是文字行元素,所以水平置中可以用 text-align:center。垂直置中的方法很多,下面使用的方法涵蓋了 IE6, Firefox, Safari, Chrome 等多種瀏覽器,參見
Centering (horizontally and vertically) an image in a box。這個方法的特點就是要在
IMG 元素 前加上文字行元素,例如
,內容留空;然後在風格表中宣告此元素是 height:100%; display:inline-block。
<textarea id='SPpiccenter' style='display:none'>
<style type='text/css'>
.out {width:350px;
height:250px;
border:solid 1px red;
font-size:0px;
}
.out * {vertical-align:middle;}
.out I {height:100%;
display:inline-block;
}
</style>
水平置中
<div class=out style='text-align:center'>
<img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</div>
垂直置中
<div class=out>
<i></i>
<img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</div>
中央
<div class=out style='text-align:center'>
<i></i>
<img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPpiccenter')</script>
圖片的置中方法二。水平置中使用 text-align:center。垂直置中將父元素的 line-height 設為 height,IMG 元素設為 vertical-align:middle;此法只能在 Firefox, Safari, Chrome 達成垂直置中;要在 IE6 達成垂直置中,還必須加上 margin:expression()。expression() 這行在個人電腦測試正常,可是移到部落格之後,會導致 IE6 停頓,所以用註解取消其功能;使用時請多測試。
<textarea id='SPpic3' style='display:none'>
<style type='text/css'>
.pic3 {width:350px;
height:250px;
border:solid 1px red;
text-align:center;
line-height:250px;
}
.pic3 IMG {vertical-align:middle;
/* margin:expression(Math.floor( (this.parentNode.clientHeight-this.clientHeight)/2 )+'px auto'); */
}
</style>
中央
<div class=pic3>
<img id='im3' src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPpic3')</script>
圖片的置中方法三。乾脆放在背景圖比較簡單。
<textarea id='SPpic4' style='display:none'>
<style type='text/css'>
.pic4 {width:350px;
height:250px;
border:solid 1px red;
}
</style>
中央
<div class=pic4 style='background:no-repeat center center url(http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg)' >
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPpic4')</script>
使用 javascript 將元素置中。下面的範例在 IMG 元素加上
ONLOAD 啟動置中的函式 centerMe();此函式使用
parentNode,
clientHeight, clientWidth 與數學函式
floor() 計算 margin。如果使用者的瀏覽器沒有開啟 javascript,此法會失效;但是機率很小,應該可以忽略。
<textarea id='SPpic5' style='display:none'>
<script type='text/javascript'>
function centerMe(obj)
{
obj.style.margin=Math.floor( (obj.parentNode.clientHeight-obj.clientHeight)/2 )+'px '
+ Math.floor( (obj.parentNode.clientWidth-obj.clientWidth)/2 )+'px';
}
</script>
<style type='text/css'>
.pic5 {width:350px;
height:250px;
border:solid 1px red;
}
</style>
中央
<div class=pic5>
<img onload='centerMe(this)' src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPpic5')</script>