css - "Float"没有 flexbox 的两侧居中元素？

Question

对于网站的标题，我想将一个元素居中，并且必须使链接行从两侧 float 。行的长度不同，所以我不能将整个菜单居中。

看比解释容易，所以这是我想要实现的效果的图像和 fiddle 。 http://jsbin.com/katuroxi/11/edit

然而， fiddle 使用了新的 flexbox，我想(如果可能的话)避免使用它。
有没有办法在没有它们的情况下做到这一点？

Answer 1

你能做到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;
}

它的作用是:

• 将 display:table 添加到 .parent 并使其呈现类似表格的逻辑并使其 100%。
• 将 display:table-cell 添加到 .left, .right, .fix 中，使其呈现为表格单元格。因此，每个单元格将占表格宽度的 33%。
• 将 font-size:0px 添加到 .parent 以删除 display:inline-block 元素之间的空白。
• 将包含文本的元素的font-size 设置回所需的值。