html - Zurb Foundation Top-Bar 的中心元素

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