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?