CSS 文字垂直置中技巧 - Wibibi

會寫這一篇是因為在CSS 中要水平置中相當簡單，只要使用text-align 即可，但是垂直置中就不是這麼容易的事情，其實說難也不難，只要用一點小技巧就可以做出文字垂直置 ... 首頁 HTML HTML5 PHP MySQL CSS CSS3 JavaScript 軟體介紹 其它 Home › CSS › CSS文字垂直置中技巧 CSS文字垂直置中技巧 會寫這一篇是因為在CSS中要水平置中相當簡單，只要使用text-align即可，但是垂直置中就不是這麼容易的事情，其實說難也不難，只要用一點小技巧就可以做出文字垂直置中的效果，本篇用的是line-height行高的技巧。

CSS文字垂直置中範例　測試文字垂直置中呈現結果測試文字垂直置中由此範例可以看到文字已經在區塊垂直方向置中了，甚至連水平都置中了。

稍為解說一下這段語法，手先是DIV區塊將文字包在裡面，style的部分，我們設定了背景顏色（background-color:#C7FF91）、寬度（width:300px）、高度（height:100px）、水平置中對齊（text-align:center）以及最重要的line-height100px。

由於DIV區塊的高度設定為100px，這時候設定文字的line-height（行高）也是100px，就自然而然的垂直置中囉！延伸閱讀CSSline-height設定字體範圍高度（行間距）CSSDIV區塊標籤的使用教學CSSbackground-color屬性與用法介紹CSStext-align水平對齊CSSvertical-align屬性 您可能會想看 CSSspan區域文字字型設計 CSSspan區域邊框顏色與樣式設計 CSSspan區域背景顏色設計 CSSdisplay:inline-block效果 CSSa連結樣式效果設計 用CSS設計出三角形圖案 CSSdisplay屬性 CSSboxmodel盒子模型 CSSlist-style列表屬性 用CSS設計HTMLbutton按鈕大小 今日熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 即時熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 ©Copyrightwibibi.com網頁設計教學百科基礎的網頁設計規劃、資料庫與程式設計Since2012