怎樣將分頁元件居中
阿新 • • 發佈:2018-11-30
在網上我們下載的jQuery外掛(分頁),引入的js和css檔案之後,簡單的修改一下jQuery對分頁的顯示要求後,我們可以看到在指定的<div>區域中出現分頁的元件。
<body> <div id="callBackPagination" class="piece" > <div id="mainContent"> 頁面顯示資料部分 </div> <div id="callBackPager"> 分頁元件顯示位置 </div> </div> </body>
分頁元件能夠顯示,但是分頁元件一般是左對齊的,而且分頁元件的長度,隨著頁數從個位數到十位數的增長,長度也是可以改變的,我們設定固定長度,然後利用margin屬性達到居中的想法明顯是不可以的。
於是,我想到了用<nav>標籤,然後用<nav>標籤包住分頁元件出現的div區域,設定居中屬性:
<body> <div id="callBackPagination" class="piece" > <div id="mainContent"> </div> <nav style="text-align: center"> <!-- 分頁居中放置--> <div id="callBackPager"></div> </nav> </div> </body>
這時執行程式碼,分頁元件正常居中,樣式相容。