css文字與圖片置中與簡易按鈕製作

有的時候只想要把文字或是圖片水平且垂直置中時，很懶得去想css怎麼達成，老是用margin + padding去做又會破壞版面，而且看起來是相當蠢的作法，今天就研究了一下到底怎麼水平與垂直置文字與圖片，不要再蠢下去了。
其中關鍵語法是用line-height與vertical-align去達成，下面舉個簡單的範例。

水平置中

.text_align {
        text-align:center;
}

垂直置中

.vertical_align {
        line-height:50px;
        font-size:1.2em;
}

水平垂直置中

.align { 
        text-align:center;
        line-height:50px;
        font-size:1.2em;
}

圖片置中

.wrap {
         /* Firefox, Chrome */
          line-height : 50px;
          white-space : nowrap;

        /*設置水平居中*/
        text-align:center;

        /* 針對IE的Hack */
        *display: block;
        *font-size: 45px;/*50 * 0.9 = 45px*/
        *font-family:Arial;
}
.wrap img{
        height:20px;
        width:20px;
        vertical-align: middle;
}

圖片編輯器-裁切篇

圖片編輯器停頓了一陣子，因為自己不曉得在忙些什麼所以就一直放著沒寫；繼上次圖片編輯器-旋轉篇後，今天在來介紹一下裁切照片的部分，主要參考的外掛為JCrop，可以輕鬆達成以前端呈現裁切照片的效果，跨瀏覽器支援也相當完整（Firefox 2+、Safari 3+、Opera 9.5+、Google Chrome 0.2+、Internet Explorer 6+），除了一般裁切外還包括設定比例裁切、裁切縮圖、預設裁切區塊、裁切動畫與裁切背景顏色更換等功能相當齊全，並且有後端php程式教學，其完整demo展示在此。
在使用上並沒有什麼太大的問題，設定等比例裁切也相當方便，基本使用如下：

1. 載入jQuery與jCrop

<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /> 



2. 載入所要裁切的照片ID
3. 參數設定

基本上使用與設定如上述所寫的，完整的使用說明請參閱。
在IE使用上有點小bug，就是當使用到等比例裁切時，會發生錯誤，於是就上網搜尋了一下解法，發現大家都有遇到此困擾，但是沒有看到相對應的解法，最後只有硬著頭皮去看source code。
結果在程式第230~240行左右有一個getFixed()的函式，裡面定義了兩個全域變數，分別為 h、w，可能是與其他區域變數有衝突而產生錯誤，於是將其定義改成區域變數就解決了！！

var aspect = options.aspectRatio,
min_x = options.minSize[0]/xscale, 
min_y = options.minSize[1]/yscale,
max_x = options.maxSize[0]/xscale, 
max_y = options.maxSize[1]/yscale,
rw = x2 - x1,
rh = y2 - y1,
rwa = Math.abs(rw),
rha = Math.abs(rh),
real_ratio = rwa / rha ? rwa / rha : 0,
xx, yy, w, h //w, h未宣告在 ie 上會發生錯誤，因此加上加上w, h宣告