Zurb Foundation顶部栏中的中心元素

Question

我有一个用Foundation 5制成的顶级导航栏。

导航栏上的元素应居中。我意识到以前曾有人问过这个问题（例如here），但到目前为止所提供的答案都无效。您也可以在其他地方看到该问题。

作为导航栏上非居中元素的完美示例，请检查this website上的“ Base 2013”​​模板。下载它并打开index.html，您将在那里看到问题。

到目前为止，各种方法对我没有用。一些失败的实验：

将margin: 0px auto;设置为<ul>或其他元素。

对text-align:center;同样适用。

关于如何在导航栏上将元素居中的任何想法？

Answer 1

您可以将flex与justify-content这样使用，]

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
.parent {
  width: 100%;
  background: red;
  height: 100px;
  display: flex;
  justify-content: center;
}

.parent div {
  padding: 0 10px;
}
我添加了填充只是为了使元素更宽并且彼此之间不粘连。

详细了解flex here

Answer 2

[如果其他人遇到相同的问题，请注意上述答案是正确的，但会破坏菜单的响应能力。要解决此问题，请在上面添加以下CSS：