＆＃34;浮动＆＃34;从没有flexbox的两侧对中心元素？

Question

对于网站的标题，我想要一个元素居中，并且必须从两边向它浮动的链接行。行的长度不一样，所以我不能只将整个菜单居中。

这比看起来更容易解释，所以这里是一个图像，是我想要实现的效果的小提琴。 http://jsbin.com/katuroxi/11/edit

然而，小提琴使用了新的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设置回我们拥有文本的元素中的所需值。

Answer 2

您可以将所有元素用作display:inline;（或display:inline-block，如果您需要填充）和text-align:center;上的.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