html - 如何使 flexbox 导航栏中的列表项居中？

Question

我有以下代码:

.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”)在它们所在的边框内居中？

Answer 1

尝试将注释的 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 元素，并将它们在其父级中水平和垂直居中。