[CSS] 區塊內文字垂直置中的方式 (單行)
先看看垂直未置中的樣式:
從上圖的 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;
}
修改結果:
註: 一般人很容易把 vertical-align 跟 valign 給搞混了，在 O3noBLOG 有詳細的說明。
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
但是如果目錄的名稱過長造成兩行時, 這種方式或許就會產生問題.
我是不曉得 HTML 原始碼是如何配置的, 我想這部份如果使用 ul li 可能會比較好一點.