html - 如何在 flexbox 导航栏中将列表项居中？

我有以下代码：

.flex {
  display: flex;
  background-color: yellow;
  list-style-type: none;
}

.flex > li {
  flex: 1;
  border: 1px solid black;
  align-items: center;
}

<nav>
  <ul class="flex">
    <!--Logo as a link-->
    <li><a href="{% url 'index' %}">Logo</a></li>
    <li><a>REGISTER</a></li>
    <li><a>LOGIN</a></li>
    <!--Search Bar-->
    <li class="search_bar">
      <form method="GET" action="{% url 'search' %}">
        <input name="query" type="text" placeholder="Zip Code or City/Town">
        <button class="btn btn-outline-success text-white my-2 my-sm-0" type="submit"></button>
      </form>
    </li>
  </ul>
</nav>

http://jsfiddle.net/0jh3fud9/2/
如何将列表项（“LOGO”、“REGISTER”、“LOGIN”、“SEARCH”）居中放置在它们所在的边框内？

最佳答案

尝试将注释的CSS规则添加到li元素（see updated fiddle）：

.flex > li {
    display: flex; // <-- make flex items
    align-items: center; // <-- center vertically in box
    justify-content: center; // <-- center horizontally in box
    flex: 1;
    border: 1px solid black;
    align-items: center;
}

这将使每个列表项也表现为一个flex项，并将它们在父项中水平和垂直居中。

关于html - 如何在 flexbox 导航栏中将列表项居中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51070057/