CSS: How to align elements around a centered element?

Question

I am trying to create a simple page navigation consisting of three parts:

1. A few previous page numbers (if any)
2. The current page number (this must be centered)
3. A few upcoming page numbers (if any)

The important thing is that the current page number is always horizontally centered within the parent container. The other two parts should take up the remaining horizontal space evenly.

This JSFiddle illustrates my two attempts at solving this problem.

Solution 1: use text-align: center. This achieves the desired result but only if both sides are equal in width. If not the current page number will not be in the center.

HTML

<div class="container">
  <input type="button" value="47">
  <input type="button" value="48">
  <input type="button" value="49">
  <input type="text" size="5" maxlength="5" value="50">
  <input type="button" value="51">
  <input type="button" value="52">
  <input type="button" value="53">
</div>

CSS

.container, input {
    text-align: center;
}

Solution 2: use manually specified widths to distribute the horizontal space evenly. This effectively centers the current page number under all circumstances but it requires you to hardcode widths.

HTML

<div class="container">
  <div class="left">
      <input type="button" value="47">
      <input type="button" value="48">
      <input type="button" value="49">
  </div>
  <div class="right">
      <input type="button" value="51">
      <input type="button" value="52">
      <input type="button" value="53">
  </div>
  <div class="center">
      <input type="text" size="5" maxlength="5" value="50">
  </div>
</div>

CSS

.left {
    width: 40%;
    float: left;
    text-align: right;
}
.right {
    width: 40%;
    float: right;
    text-align: left;
}
.center {
    width: 20%;
    margin-left: 40%;
}

Neither of these solutions really do what I want. Is there any way to have the current page number centered while allowing the other elements to align to its natural size, rather than to an arbitrary pixel or percentage width?

Answer 1

Try this CSS table layout follows.

.container {
    width: 100%;
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
}
.left, .center, .right {
    display: table-cell;
    border: 1px solid red;
    text-align: center;
}
.center {
    width: 50px;
}

<div class="container">
    <div class="left">
        <input type="button" value="47">
        <input type="button" value="48">
        <input type="button" value="49">
    </div>
    <div class="center">
        <input type="text" size="5" maxlength="5" value="50">
    </div>
    <div class="right">
        <input type="button" value="51">
        <input type="button" value="52">
        <input type="button" value="53">
    </div>
</div>

jsfiddle

Answer 2

You should use flex and float properties together, checkout my solution:

.container {
  display: -webkit-flex; /* Safari */
  display: flex;  
}

.container, input {
    text-align: center;
}

.container:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dotted #ff0000;
}

.left {
  display: inline-block;
  flex: 1;
  
}

.left input {
  float: right;  
}

.right {
  display: inline-block;
  flex: 1;
}

.right input {
  float: left;
}

.center {
  display: inline-block;
}

<div class="container">
  <div class="left">
      <input type="button" value="48">
      <input type="button" value="49">
  </div>
  <div class="center">
      <input type="text" size="5" maxlength="5" value="50">
  </div>
  <div class="right">
      <input type="button" value="51">
      <input type="button" value="52">
      <input type="button" value="53">
  </div>
  
</div>