2012-04-28 106 views
1

我正在使用will_paginate進行分頁,並使用代碼根據Digg使用的樣式對分頁鏈接進行樣式設置。這是link to the "guide"。我試圖中心對齊分頁,但似乎無法獲得到中心的實際鏈接。我試過用自己的div封裝它們,並使用margin:auto;但鏈接仍保持左對齊。在此先感謝,這裏的鐵軌和CSS代碼:中心對齊分頁

Rails的

<div class="pagination"> 
    <div class="page_info"> 
     <%= page_entries_info @vars %> 
    </div> 
    <div class="pagination_links"> 
     <%= will_paginate @vars, param_name: 'index_paginate', :container => false %> 
    </div> 
</div> 

CSS

.pagination { 
    background: white; 
    cursor: default; 
    /* self-clearing method: */ } 
    .pagination a, .pagination span, .pagination em { 
    padding: 0.2em 0.5em; 
    display: block; 
    float: left; 
    margin-right: 1px; } 
    .pagination .disabled { 
    color: #999999; 
    border: 1px solid #dddddd; } 
    .pagination .current { 
    font-style: normal; 
    font-weight: bold; 
    background: #2e6ab1; 
    color: white; 
    border: 1px solid #2e6ab1; } 
    .pagination a { 
    text-decoration: none; 
    color: #105cb6; 
    border: 1px solid #9aafe5; } 
    .pagination a:hover, .pagination a:focus { 
    background: white; 
    color: #000044; 
    border-color: #000044; } 
.pagination .pagination_links { 
    margin: 0 auto; 
    width: 70%; 
    text-align: center; 
} 
    .pagination .page_info { 
    margin: 0 auto; 
    background: #2e6ab1; 
    color: white; 
    padding: 0.4em 0.6em; 
    width: 22em; 
    margin-bottom: 0.3em; } 
    .pagination .page_info b { 
    color: #000033; 
    background: #6aa6ed; 
    padding: 0.1em 0.25em; } 
    .pagination:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; } 
    * html .pagination { 
    height: 1%; } 
    *:first-child + html .pagination { 
    overflow: hidden; } 

更新:我是新來的CSS和思想股利自動調整大小本身的內容。我正在尋找一個解決方案,將其作爲答案。當我意識到我在找什麼時,我搜索了它並找到了答案。

+0

我在你的標記中看不到

你是否意味着將它包含在css中? – albert2012-04-28 08:43:11

+0

是的,我不應該包括第一部分,因爲它與問題無關 – Steve 2012-04-28 21:11:03

回答

3

我已經創建了一個jsfiddle http://jsfiddle.net/trickeedickee/B2Ku3/爲您查看答案。它需要你將div分類包裝在一個包裝div中,然後給出一個寬度

margin: 0 auto; 

我希望這有助於。

+0

感謝您的答覆技巧,但這不起作用因爲這將整個頁面分頁。我希望鏈接也是中心的。你可以在你的小提琴中看到這一點,通過刪除所有頁面,但1,2和3,並將.pagination中的背景顏色更改爲黑色。 – Steve 2012-04-28 21:32:54

+0

我試過你的解決方案,它不適用於具有動態大小的分頁。 – ExiRe 2012-10-30 17:41:49

+0

我試圖在will_paginate上使用渲染器:FoundationPagination :: Rails,它的工作原理與我想的一樣 - 鏈接現在居中。非常感謝! – Tim 2016-01-25 09:06:06

0

我認爲你應該做

and make width 50% in digg_pagination class 

<div class="pagination"> 
    <div class="page_info" style="text-align: right"> 
     <%= page_entries_info @vars %> 
    </div> 
    <div class="pagination_links"> 
     <%= will_paginate @vars, param_name: 'index_paginate', :container => false %> 
    </div> 
</div> 

感謝。

+0

請參閱我對技巧的評論答案,如果我正確理解您的話,它也適用於此,謝謝 – Steve 2012-04-28 21:34:48