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 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.