Question

我希望UL能够执行以下操作：

我希望我的UL垂直居中于Nav。我试过用了包含display: table;但不起作用的包装。
我希望我的LI水平分布在整个宽度上我UL做的display: flex;并不完美。
我需要它独立于高度，因为这可能会在以后发生变化。

我有以下代码：

nav {
  width: 780px;
  height: 50px;
  text-align: center;
  background-color: pink;
}
nav ul {
  list-style-type: none;
  display: flex;
}
nav ul li {
  display: inline-block;
  margin: 0 auto;
  padding: 10px;
  background-color: lightgreen;
}

<nav>
  <ul>
    <li>sample</li>
    <li>sample</li>
    <li>sample</li>
  </ul>
</nav>

fiddle

我希望你能提前帮助我。

Answer 1

稍微调整一下你的flexbox布局：

nav {
  width: 780px;
  height: 50px;
  text-align: center;
  background-color: pink;
}

nav ul {
  height: 100%;                     /* take height of nav parent */
  list-style-type: none;
  padding-left: 0;                  /* remove default UL padding */
  display: flex;
  justify-content: space-around;    /* horizontal alignment (applies to child elements) */
  align-items: center;              /* vertical alignment (applied to child elements) */
}

nav ul li {
  /* display: inline-block;         <-- not necessary */
  /* margin: 0 auto;                <-- not necessary */
  padding: 10px;
  background-color: lightgreen;
}

<nav>
  <ul>
    <li>sample</li>
    <li>sample</li>
    <li>sample</li>
  </ul>
</nav>

Revised Fiddle

Answer 2

可以使用display：table＆amp;显示：表单元格。请检查此更新的Fiddle

nav {
    width: 780px;
    height: 50px;
    text-align: center;
    background-color: pink;
    display: table;
}

nav ul {
    list-style-type: none;
    display: table-cell;
    vertical-align: middle;
    padding: 0;
}

nav ul li {
    padding: 10px;
    background-color: lightgreen;
    width: 33.33%;
    box-sizing: border-box;
    float: left;
}

垂直居中UL并水平对齐LI儿童

2 个答案: