茫茫網海中的冷日 - 對這文章發表回應
茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1664715 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_60D_00267.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

對這文章發表回應

發表限制: 非會員 可以發表

發表者: 冷日 發表時間: 2011/10/24 3:13:33


水平與垂直置中





此練習探討不同的置中方法。要將一段文字或一張圖片放在矩形格子(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>


原文出處:螞蟻的 CSS: 水平與垂直置中
內容圖示
url email imgsrc image code quote
樣本
bold italic underline linethrough   












 [詳情...]
validation picture

注意事項:
預覽不需輸入認證碼,僅真正發送文章時才會檢查驗證碼。
認證碼有效期10分鐘,若輸入資料超過10分鐘,請您備份內容後,重新整理本頁並貼回您的內容,再輸入驗證碼送出。

選項

Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|