Zurb Foundation Top-Bar 的中心元素

Question

我有一个用 Foundation 5 制作的顶部导航栏。

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

作为导航栏上非居中元素的完美示例，请查看 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 添加到上面的内容中：

@media all and (max-width: 500px) {
  .parent {
    flex-direction: column;
  }
}

这将使菜单项再次按预期流动。

使用 Foundation 时不需要填充类。

'Thank you' 到 Mileta Dulovic 用于提供解决方案的正确路径。

Center elements on Zurb Foundation Top-Bar