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和思想股利自動調整大小本身的內容。我正在尋找一個解決方案,將其作爲答案。當我意識到我在找什麼時,我搜索了它並找到了答案。
我在你的標記中看不到
是的,我不應該包括第一部分,因爲它與問題無關 – Steve 2012-04-28 21:11:03
回答
我已經創建了一個jsfiddle http://jsfiddle.net/trickeedickee/B2Ku3/爲您查看答案。它需要你將div分類包裝在一個包裝div中,然後給出一個寬度
我希望這有助於。
來源
2012-04-28 08:31:19 frontendzzzguy
感謝您的答覆技巧,但這不起作用因爲這將整個頁面分頁。我希望鏈接也是中心的。你可以在你的小提琴中看到這一點,通過刪除所有頁面,但1,2和3,並將.pagination中的背景顏色更改爲黑色。 – Steve 2012-04-28 21:32:54
我試過你的解決方案,它不適用於具有動態大小的分頁。 – ExiRe 2012-10-30 17:41:49
我試圖在will_paginate上使用渲染器:FoundationPagination :: Rails,它的工作原理與我想的一樣 - 鏈接現在居中。非常感謝! – Tim 2016-01-25 09:06:06
我認爲你應該做
感謝。
來源
2012-04-28 08:24:47
請參閱我對技巧的評論答案,如果我正確理解您的話,它也適用於此,謝謝 – Steve 2012-04-28 21:34:48
如果你不想讓你的居中有一個寬度,我會建議檢查this answer out。
來源
2015-05-12 21:58:46 Jimeh
相關問題