vertical-align 第四頁

vertical-align 4

測試 TABLE。在 Firefox, Safari, Chrome 中，長度, 百分比, sub, super, text-top, text-bottom 是對齊基準線。在 IE6中，長度, 百分比, sub, super 會置中；text-top, text-bottom 則有效果。 <style type='text/css'> .vtc TR {width:100px; height:60px; background:#733; } </style> <table class=vtc> <tr><td>vertical-align: <td style='vertical-align: baseline'>baseline <td style='vertical-align: 20px'>20px <td style='vertical-align: 80%'>80% <td style='vertical-align: sub'>sub <td style='vertical-align: super'>super <tr><td>vertical-align: <td style='vertical-align: top'>top <td style='vertical-align: middle'>middle <td style='vertical-align: bottom'>bottom <td style='vertical-align: text-top'>text-top <td style='vertical-align: text-bottom'>text-bottom </table>

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {display:inline-block; width:140px; height:100px; background:#733; vertical-align:middle; } .hvr:hover {vertical-align:top;} .hvr:active {vertical-align:bottom;} </style> 好玩遊戲：<span class=hvr>射擊遊戲, 賽車遊戲, 小遊戲.</span>

javascript 應用。可以用 style 物件 的特徵 verticalAlign 作動態變化。此範例使用到 toggleCSS()。 <div style='height:150px'> 射擊遊戲, 好玩遊戲, <img id='test' width='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg' /> 益智遊戲, 賽車遊戲. </div> <script type='text/javascript'> function toggleCSS(id, pty, v1, v2, ms) { var os=document.getElementById(id).style; os[pty]= (os[pty] == v1 ) ? v2 : v1; setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms); } toggleCSS("test", "verticalAlign", "text-top", "text-bottom", 1000); </script>

vertical-align（你正在看 第四頁）

:

第一頁

第二頁

第三頁

第四頁