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.
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.
如果您不希望中心有宽度,我建议您查看此答案 。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.