CSS TIP - 縮排和文字垂直置中

今天要來介紹的這個CSS TIP,一部分是為了應付IE的box model才出現的。

首先,我有一個固定寬高的頁首區塊,也就是我接下來要介紹的CSS TIP所可以應用的地方,這種頁首區塊內的文字通常只有一行,其他類似的物件還有各種標題(h1~h6)、導覽列清單(li)等。這些區塊物件在還沒有任何設定的時候,裡面的文字通常都是貼齊左上角的,這邊舉一個 h1標題 的例子,它的 CSS Code 如下:

h1 {
    font-size: 200%;
    color: #fff;
    background: #000;
    height: 100px;
}

顯示結果如下:

這通常不是我們想要的效果,我們可能想要有一點內距、文字水平置中、垂直置中、或是把文字藏起來,用背景圖來代替,不過隨便設定padding,可能就會遇到IE的box model問題,雖然IE 7已經可以用標準模式,但是IE 6的使用者還很多,目前還不能忽略這個問題。除了垂直置中以外,其他幾種要求大概都可以簡單達成,如果是用表格排版的話連垂直置中也不是問題,不過基本上我不考慮表格排版就是,一般的作法有CSS hack和多層div兩種,我要介紹的則是用line-height和text-indent兩種屬性來達到我們的需求,不用CSS hack和多層div。首先就來把文字垂直置中吧,這邊我用的是line-height(行高)這個屬性,只要設定的高度和區塊高度一樣(此例為100px),這單一行的文字就會垂直置中了,結果如下圖:

如果想要文字水平也置中,只要加上text-align: center;就可以了,不過我比較喜歡讓文字靠左,然後留一點邊距,讓文字不要這麼貼齊邊緣,這時可以用text-indent(首行縮排)這個屬性,因為內文只有一行,所以可以偷偷用這個屬性來做出padding-left的效果,如果文字是多行的話,大概上個行高設定就讓你的內文爆炸了吧XD。加上15px縮排的結果如下圖:

text-indent除了可以製造內距的效果之外,還可以用來把文字隱藏,免得檔到背景圖,只要把值設成負的,例如-1000000px,文字就會跑到視窗可視範圍之外,要保險一點還可以加上overflow: hidden;的設定,讓超出區塊範圍的東西隱藏起來。以上就是本次的CSS TIP內容,希望能幫到大家,下篇應該會說javascript的東西吧。

補充:考量到親和力的情況下,還是比較推薦使用img標籤配合alt屬性的替代文字的,這樣在圖片讀取不到的狀況下,也還是看得到文字內容。

comments powered by Disqus