CSS筆記 – 圖文垂直置中對齊

圖文垂直置中對齊:style=”vertical-align: middle;” 

➤➤一般格式,未指定對齊點時,圖文在底邊對齊:
<img src=”…”/>➡<img src=”…”/>

➤➤置中格式,加上 style=”vertical-align: middle;”,設定圖文置中對齊,設一個對齊一個:
<img style=”vertical-align: middle;” src=”…”/>➡<img src=”…”/>

➤➤置中格式,文字的左右圖形皆須設定,才能達到效果:
<img style=”vertical-align: middle;” src=”…”/>➡<img style=”vertical-align: middle;” src=”…”/>

➤➤採用 % 百分比來設定也是一樣的結果:(見下方「常用參數表」說明)
<img style=”vertical-align: -120%;” src=”…”/>→<img style=”vertical-align: -120%;” src=”…”/>

 

➤➤CSS 圖文對齊 vertical-align 常用參數表:(可另行搭配文繞圖語法 img style=”float: left/right” )

語 法 說 明
vertical-align: baseline; 預設值,圖片在該行的基礎線上。
vertical-align: top; 圖片垂直對齊該行顯示區域的最高位置。
vertical-align: text-top; 圖片垂直對齊該行文字的最高位置。
vertical-align: middle; 圖片垂直對齊該行文字的居中位置。
vertical-align: bottom; 圖片垂直對齊該行顯示區域的最低位置。
vertical-align: text-bottom; 圖片垂直對齊該行文字的最低位置。
vertical-align: %; 圖片以百分比的位置對齊該行文字。(0%=baseline,正%往下,負%往上,範例是 -30%)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *