html - CSS - 带有水平居中的一行和两行长条目的顶部菜单 – 没有 flex？

Question

我正在尝试使用简单的 div 和 display:inline-table 构建一个顶部菜单，水平居中放置一些一两行长的条目。问题是我还没有找到一种方法来将只有一行长的条目(Item0 和 Item1)居中，除非我使用 display:flex。我想在不指定像素高度的情况下执行此操作。

条目周围的黄色框仅供引用，以便我更好地了解每个条目的情况。

由于我是前端开发的新手，我想知道是否有更好的方法来做到这一点。

这是 jsbin .

谢谢! J

Answer 1

您可以使用 display:table/table-cell 请参阅下面的代码片段(我稍微简化了您的代码):

片段

body {
  font-family: ubuntu;
}
#nav1 {
  width: 100%;
  background-color: grey;
  display: table
}
.menus {
  display: table-cell;
  vertical-align: middle;
  font-size: 0.9em;
  text-align: right;
  color: yellow;
  padding: 8px;
  border: solid 1px;
}

<div id="nav1">
  <div class="menus">
    Item 0 (1 line)
  </div>
  <div class="menus">
    Item 1 (1 line)
  </div>
  <div class="menus">
    Item 2 long text
    <br>item 2 long text
  </div>
  <div class="menus">
    Item 3 long text
    <br>item 3 long text
  </div>
  <div class="menus">
    Item 4 long text
    <br>item 4 long text production
  </div>
  <div class="menus">
    Item 5 long text
    <br>item 5 long text
  </div>
</div>