[CSS] 區塊內文字垂直置中的方式 (單行)

十月 17, 2005

先看看垂直未置中的樣式:

20051017_01.gif

從上圖的 OPTICAL DRIVE 開始。且由於未垂直置中的緣故，多個區塊在有設定 height 的狀況下會產生接合不完全的畫面。


CSS:

#menuLinkLeft a {
text-align: center;
width:140px;
height:24px;
color: white;
background: #6B7683 url(images/left_bar_bg.jpg) no-repeat;
}

單行的處理比較容易，只要把 line-height 的高度設成跟外部區塊的 height 相同即可。

#menuLinkLeft a {
text-align: center;
width:140px;
height:24px;
line-height:24px;
color: white;
background: #6B7683 url(images/left_bar_bg.jpg) no-repeat;
}

修改結果:
20051017_02.gif

註: 一般人很容易把 vertical-align 跟 valign 給搞混了，在 O3noBLOG 有詳細的說明。

迴響 (3)

 

  1. archangel 說道：
    十月 17, 2005 at 1:47 下午

    但是如果目錄的名稱過長造成兩行時, 這種方式或許就會產生問題.

    我是不曉得 HTML 原始碼是如何配置的, 我想這部份如果使用 ul li 可能會比較好一點.

  2. 瘋狂假面 說道：
    十月 1, 2007 at 3:05 上午

    喔喔~還在煩惱怎麼對齊說~~
    想不到找到了解答 真是太開心了!!謝謝!!

  3. 阿米 說道：
    三月 4, 2008 at 4:07 上午

    哈~本來一直疑惑為什麼text-align沒辦法對齊，
    原來要這樣用啊~~
    真是點通了小妹的疑惑!!

迴響