"Float" against centered element from both sides without flexbox?

Question

For the header of a website, I want to center an element and have to rows of links float against it from both sides. The rows are not the same length, so I can't just center the whole menu.

It's easier to see than to explain, so here's an image and a fiddle of the effect I want to achieve. http://jsbin.com/katuroxi/11/edit

The fiddle however uses the new flexbox, which I would like to (if possible) avoid.
Is there a way to do this without them?

Answer 1

You can do it like this:

.parent {
  display: table;
  table-layout:fixed;
  padding: 0;
  font-size:0px;
  width:100%;
}

ul {
  padding: 0;
  margin: 0;
}

.left, .right, .fix {
  display:table-cell;
}

.left {
  text-align: right;
}

li {
  list-style: none;
  display: inline-block;
  border: 1px solid red;
  font-size:16px;
}

.fix {
  text-align: center;
  border: 1px solid red;
  width: 120px;
  font-size:16px;
}

What this does is:

• add display:table to the .parent and make it render with table-like logic and make it 100%.
• add display:table-cell to .left, .right, .fix so it will render like a table cell. Because of this, each cell will take 33% of the table width.
• add font-size:0px to the .parent to remove the white space between display:inline-block elements.
• set the font-size back to the desired value in the elements where we have the text.

Answer 2

You could use all elements as display:inline; (or display:inline-block if you want some padding) and text-align:center; on the .parent

.parent {
  padding: 0;
  width: 100%;
  text-align: center;
}

ul {
  padding: 0;
  margin: 0;
  display: inline;
}

.left, .right, .fix {
  display: inline;
  text-align: center;
}

li, .fix {
  list-style: none;
  border: 1px solid red;
  display: inline;
}

http://jsbin.com/katuroxi/12/edit