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

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>

Answer 2

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 3

Instead of specifying the width in % you can use CSS calc to split the full width in 3 parts:

[50% - 25px][50 px][50% - 25px]

Then right-align the left part, left align the right part and you're done. When using SASS or LESS you only need to specify the width of the center part.

.container {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.container > * {
    display: inline-block;
}
.container .left {
    width: calc(50% - 25px);
    text-align: right;
}
.container > input {
    width: 50px;
    margin: 0px;
    text-align: center;
}
.container .right {
    width: calc(50% - 25px);
    text-align: left;
}

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

Answer 4

You can use the CSS property display with the value flex in the wrapper, and the property flex in the children.

To learn more about it, check the following resource: A Complete Guide to Flexbox

Here is an example:

.wrapper {
  display: flex;
}
.wrapper > div {
  text-align: center;
  flex: 1;
  border: 1px solid #000;
}

<div class="wrapper">

  <div>
    <button>1</button>
    <button>2</button>
  </div>

  <div>
    <button>3</button>
  </div>

  <div>
    <button>4</button>
    <button>5</button>
    <button>6</button>
  </div>

</div>

Answer 5

Here is a solution you might consider:

Use hidden buttons to always maintain the same number of tags on left and right side

<div class="container">
  <input style="visibility: hidden" type="button" value="0">
  <input style="visibility: hidden" type="button" value="0">
  <input style="visibility: hidden" type="button" value="0">
  <input type="text" size="5" maxlength="5" value="1">
  <input type="button" value="2">
  <input type="button" value="3">
  <input type="button" value="4">
 </div>