Center aligning pagination

Question

I'm doing pagination with will_paginate and used the code to style my pagination links based off the style Digg uses. Here's the link to the "guide". I'm trying to center align the pagination but can't seem to get the actual links to center. I've tried wrapping them in their own div and doing the margin: auto; but the links still stay left aligned. Thanks in advance, here's the rails and css code:

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; }

UPDATE: I'm new to CSS and thought the div autosized itself to its contents. I was looking for a solution that did just this as an answer. After I realized what I was looking for I googled it and found the answer.

i don't see in your markup...did u mean to include that in the css? — albert, Apr 28 '12 at 08:43
yes i shouldn't have included that first part as it's irrelevant to the question sorry — Steve, Apr 28 '12 at 21:11

score 3 · Accepted Answer · answered Apr 28 '12 at 08:31

3

I have created a jsfiddle http://jsfiddle.net/trickeedickee/B2Ku3/ for you to see the answer. It requires you wrap the div with class of pagination in a wrapping div and then give that a width with

margin: 0 auto;

I hope this helps.

answered Apr 28 '12 at 08:31

frontendzzzguy

3,242
21
31

thanks for the reply trick, this doesn't work however because this centers the whole pagination in the page. I want the links to be centered as well. You can see this in your fiddle by removing all the pages but 1, 2, and 3 and changing the background color inside .pagination to black. – Steve Apr 28 '12 at 21:32
I tried your solution and it doesn't work with pagination which has dynamically size. – ExiRe Oct 30 '12 at 17:41
I tried this on will_paginate using the renderer: FoundationPagination::Rails and it worked exactly as I'd like - the links are now centered. Many thanks! – Tim Jan 25 '16 at 09:06

urjit on rails · Answer 2 · 2012-04-28T08:32:17.920

0

I think you should do

 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>

Thanks.

edited Apr 28 '12 at 08:32

answered Apr 28 '12 at 08:24

urjit on rails

1,763
4
19
36

see my comment on tricks answer, it applies here as well if I understand you correctly thanks – Steve Apr 28 '12 at 21:34

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

If you don't want your centered to have a width, I would suggest checking this answer out.

edited May 23 '17 at 11:52

Community

1
1

answered May 12 '15 at 21:58

Jimeh

367
1
6
16

Center aligning pagination

3 Answers3