nicholas79171 nicholas79171 - 5 months ago 14
CSS Question

How do I center a link with other text next to it?

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
?

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