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