CSS 學習筆記 > CSS DIV 區塊內的文字或圖片置中

CSS DIV 區塊內的文字或圖片置中的技巧是非常好用的，因為預設的 DIV 區塊內元素通常會對齊至左上角，但是並不是所有的網頁設計都需要這樣的對齊方式，甚至有許多網頁設計所使用的 DIV 區塊內文字都需要置中對齊，DIV 本身並沒有提供這樣的置中對齊功能，所以網頁設計師可以採用其他的 CSS 對齊技巧來達到文字或圖片置中對齊的效果，以下整理至範例給各位讀者朋友們參考，主要分為水平置中與垂直置中兩大方向。

CSS DIV 區塊內的文字或圖片置中範例一、水平置中範例的效果範例一呈現的是文字與圖片在 DIV 區塊中的水平置中效果，由於水平置中效果比較簡單，只需要使用 CSS 的 text-align 屬性就能讓 DIV 區塊內的元素自動水平置中，有了 text-align:center 的效果，就可以把元素丟到 DIV 區塊中任期自動置中。

CSS DIV 區塊內的文字或圖片置中範例二、文字垂直置中範例的效果如果想要讓文字可以在垂直方向也置中該怎麼做呢？其實與範例一蠻類似的，只是要再加上一個 CSS 的 line-height 屬性，屬性值就設為與 DIV 區塊的高度（height）相同即可讓 DIV 區塊內文字在垂直方向置中。將 text-align 與 line-height 兩個屬性搭配使用，就能很輕易的設計出 DIV 區塊內文字在水平與垂直方向都呈現置中效果。

更多 DIV 設計技巧

• CSS DIV 背景圖片
• 修改 CSS DIV 區塊內的文字顏色
• 修改 CSS DIV 區塊內的文字字型

累積熱門文章

• 如何用 css style 替文字增加刪除線
• 用 DIV 排版兩欄式網頁設計
• 用 DIV 排版三欄式網頁設計
• CSS text-align 水平對齊設計
• css color 文字顏色
• CSS DIV 區塊
• 用 DIV 排版單欄式網頁設計
• CSS 的註解寫法規則
• css background-color 背景顏色
• CSS z-index 垂直螢幕方向位置 (z軸高度)

今日熱門文章

• CSS z-index 垂直螢幕方向位置 (z軸高度)
• 三種常用的 CSS 選擇器(CSS selector)
• 為什麼要學習 CSS 網頁設計
• CSS DIV 區塊
• css color 文字顏色
• css padding 內距
• css margin 外距
• CSS 的註解寫法規則
• CSS border 元素邊框設計
• 如何用 css style 替文字增加刪除線

CSS 是目前非常熱門的網頁設計語言，幾乎所有主流的瀏覽器都支援 CSS 語法，比起傳統的網頁設計方式，CSS 能夠提供設計師更多的優勢以設計出更獨具風格的網頁，也讓網站維護更加有效率，CSS 讓網頁設計更進化了。