I have pagination at the bottom of a page and I'd like to keep the "Page 1 of 2" centered and just have the "Older" and "Newer" buttons wrap to it, even if there is only one of the two buttons present.
Here's what I currently have:
.wrapper {
background-color: #aaa;
width: 540px;
margin: 0 auto;
text-align: center;
}
.links {} .page {}<div class="wrapper">
<a href="#" class="links">Older</a>
<span class="page">Page 1 of 2</span>
</div>How do I keep "Page 1 of 2" centered in the div and just put the "Older" or "Newer" link adjacent to the left or right side of the span?
.wrapper {
background-color: #aaa;
width: 100%;
margin: 0 auto;
}
.items {
position: relative;
text-align: center;
}
.item {
margin: 0 5px;
}
.always-left, .always-right {
position: absolute;
top: 0;
}
.always-left {
left: 0;
}
.always-right {
right: 0;
}
<div class="wrapper items">
<a class="item always-left" href="#">Older</a>
<div class="item">Page 1 of 2</div>
<a class="item always-right" href="#">Older</a>
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments