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-alignline-height 兩個屬性搭配使用,就能很輕易的設計出 DIV 區塊內文字在水平與垂直方向都呈現置中效果。

更多 DIV 設計技巧
分享於 2015-01-05