探討vertical-align應用_CSS/HTML

來源:互聯網
上載者:User
與valign的對比

vertical-align在小雨手冊上的解釋是:設定或檢索對象內容的垂直對其方式。我覺得不太理解的是vertical-align所在的分類是“屬性/文本”

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

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



使用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;,做個對比看的更清楚:


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

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

inline應用

用來決定inline對象的垂直位置,看兩個例子:

小圖:http://www.rexsong.com/blog/attachments/20...ignmenttest.htm
大圖:http://www.rexsong.com/blog/attachments/20...rticalalign.htm

  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.