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

玖月 13

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屬性的替代文字的，這樣在圖片讀取不到的狀況下，也還是看得到文字內容。

09:39@CSS & HTML|迴響(4)|引用(0)

導覽列

單篇彙整