首頁 > web前端 > css教學 > 探討vertical-align應用_CSS/HTML

探討vertical-align應用_CSS/HTML

WBOY
發布: 2016-05-16 12:10:54
原創
1759 人瀏覽過

與valign的對比

vertical-align在小雨手冊上的解釋是:設定或擷取物件內容的垂直對其方式。我覺得不太理解的是vertical-align所在的分類是「屬性/文本」

O3noBLOG特別強調的是vertical-align和valign的不同,的確vertical-align應用最多的應該是在td內,控制內部物件位置,和td的valign屬性極為相似。

valign共有四個參數:top, baseline, bottom, middle,相對而言vertical-align也有相同的屬性值,以下是對td控制對比:

探討vertical-align應用_CSS/HTML

使用vertical-align:top;來避免td預設的valign="middle"是很好的選擇,當然也可以使用vertical-align:middle;來對td控制,但對div肯定也是無效的。

效果示範:http://www.rexsong.com/blog/attachments/20...1246_valign.htm

與align的對比

依照w3的提示,使用vertical-align使用在inline物件上,例如對img的控制,於是又和img的align屬性類似。

使用align="absmiddle"控制img絕對居中的時候,也可以嘗試使用vertical-align:middle;,做個對比看的更清楚:

探討vertical-align應用_CSS/HTML


所以真正的絕對居中還是align="absmiddle",這是使用CSS不可取代的。

效果示範:http://www.rexsong.com/blog/attachments/20...41444_align.htm

inline應用


inline應用
應用用來決定inline物件的垂直位置,看兩個例子:
小圖:http://www.rexsong.com/blog/attachments/20... ignmenttest.htm

大圖:http://www.rexsong.com/blog/attachments/20...rticalalign.htm
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板