常見網頁元素要水平置中是比較簡單的一件事，但若是要垂直置中的話就比較麻煩了！現在 Center element plugin 能快速方便的幫開發者來做到水平、垂直置中的效果。
套件名稱：Center element plugin
套件版本：1.1.2
作者網站：http://www.alexandremagno.net/blog/
套件網址：http://plugins.jquery.com/project/elementcenter
發佈日期：2009-04-08
檔案大小：1.81 KB
檔案下載：jquery.center.js
參數說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 | vertical(選填) 描述： 是否垂直置中 預設值： true horizontal(選填) 描述： 是否水平置中 預設值： true |
方法說明：
檢視原始碼 JavaScript
1 2 | // 產生 center 效果 $(selector).center([params]); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.center.js"></script> <style type="text/css"> .content { border: 1px solid green; background-color: #E0E0EF; height: 250px; } .centered { padding: 20px; border: 1px solid red; background-color: #35678F; color: white; width: 150px; height: 100px; } </style> <script type="text/javascript"> $(function(){ // 水平、垂直置中 $(".centered:eq(0)").center(); // 水平置中 $(".centered:eq(1)").center({ vertical: false }); // 垂直置中 $(".centered:eq(2)").center({ horizontal: false }); }); </script> <body> <h3>水平、垂直置中</h3> <div class="content"> <div class="centered"> <p>the content here will be centered</p> </div> </div> <h3>水平置中</h3> <div class="content"> <div class="centered"> <p>the content here will be centered</p> </div> </div> <h3>垂直置中</h3> <div class="content"> <div class="centered"> <p>the content here will be centered</p> </div> </div> </body> |