Css &引用；浮动；在没有flexbox的情况下，从两侧对中元素？

对于一个网站的标题，我想把一个元素放在中心，并且必须有一排链接从两边浮动到它的对面。行的长度不一样，所以我不能将整个菜单居中

看起来容易解释起来难，所以这里有一张图片和我想要达到的效果。

然而，小提琴使用了新的

flexbox

，我希望（如果可能的话）避免使用它。

---

有没有一种不用它们的方法可以做到这一点？

您可以使用所有元素作为

display:inline

（或

显示：内联块

如果需要一些填充）和

文本对齐：居中.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;
}

您可以这样做：

它的作用是：

• 将

  display:table

  添加到

  .parent

  中，并使用类似于表的逻辑进行渲染，使其

  100%

• 将

  display:table cell

  添加到

  .left、.right、.fix

  ，使其呈现为一个表格单元格。因此，每个单元格将占表格宽度的33%
• 将

  font-size:0px

  添加到

  .parent

  以删除

  显示：内联块

  元素之间的空白
• 在包含文本的元素中，将

  字体大小设置回所需的值

---

正如我所说，两边的宽度不一定相同。我应该为小提琴选不平衡的。下面是您的解决方案的样子，四个在右边，三个在左边：如您所见，如果在两侧添加更多链接，则

center

元素不会保持居中。这不是一个非常漂亮的解决方案，但肯定是一个兼容的解决方案。感谢您的快速回复！不客气！顺便说一句，不要担心使用像桌子一样的东西。在这种情况下，使用表格进行布局的大多数丑陋之处不适用于使用

display:table

）

.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;
}