Html CSS-顶部菜单，具有水平居中的一行和两行长条目–；没有弹性？

我正在尝试使用simple

div

和

display:inline table

构建一个顶部菜单，该菜单水平居中放置一些一行或两行长的条目。问题是我没有找到一种方法来将只有一行长的条目（Item0和Item1）居中，除非我使用

display:flex

。我希望在不指定像素高度的情况下执行此操作

条目周围的黄色框仅供参考，这样我可以更好地看到每个条目发生了什么

由于我对前端开发非常陌生，我想知道是否有更好的方法来实现这一点

这是你的电话号码

谢谢！

---

J

您可以使用

display:table/table cell

查看下面的代码片段（我已经简化了您的代码）：

一小条

正文{
字体系列：ubuntu；
}
#导航1{
宽度：100%；
背景颜色：灰色；
显示：表格
}
.菜单{
显示：表格单元格；
垂直对齐：中间对齐；
字号：0.9em；
文本对齐：右对齐；
颜色：黄色；
填充：8px；
边框：实心1px；
}

项目0（1行）
项目1（1行）
项目2长文本

项目2长文本
项目3长文本

项目3长文本
项目4长文本

项目4长文本制作
项目5长文本

项目5长文本

谢谢你，迪帕斯。。我要试试这个。