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>

17763

如何在列表项（“ 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;
}

这将使每个列表项也充当弹性项，并将它们在父级中水平和垂直居中。

Answer 2

您应该做的就是在完成操作后将元素声明为flex容器。

将align-items: center;和justify-content: center;属性添加到它们中，但是您实际上并没有这样做，因为在其中没有空间可以放置任何内容，因此它不知道要放置什么内容它来。

删除flex: 1;，建议添加padding: 10px;和margin: 5px;，它应该可以工作。如果您希望它们彼此靠近，则只需添加填充。

P.S。您也可以使用text-align: center;

如何在弹性框导航栏中将列表项居中？

2 个答案: