Question

我似乎找不到一种优雅且反应迅速的方式来自动在导航栏的中心定位“徽标”，因为考虑到可以添加或删除更多项目，这比固定边距数字更有意义（因为我知道我可以那样做）。

设计很简单（内置于盖茨比）：

nav {
  display: flex;
  margin: 0 auto;
  max-width: 600px;
}

a {
  margin-right: 20px;
}

.logo {
  margin: 0 auto;
}

<nav>
  <a>Item 1</a>
  <a>Item 2</a>
  <a>Item 3</a>
  <a class="logo">Logo</a>
  <a>Item 4</a>
</nav>

我不确定如何通过媒体查询的组合来固定边距数（即左10px左22px右）而不解决该问题。

有人有什么解决办法吗？

Answer 1

一种解决方案可能是将导航分为左，中和右三个不同部分。然后，使用flex box放置它们，但是给它们最小和最大页面的3rd。另外，您将需要将徽标居中并右对齐右列。

可能更强大的解决方案是使用CSS网格。将页面分为3列的想法相同，但是您可以将3列的宽度设置为1fr，而不是将最小和最大宽度设置为33.333333 ...％-我认为这是更优雅的解决方案。我也提供了一个示例。

nav {
  display: flex;
  justify-content: flex-start;
}

nav>div {
  max-width: 33.3333%;
  min-width: 33.3333%;
}

.logo {
  text-align: center;
}

.right {
  text-align: right;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-left {
  grid-column: 1 / 2;
  background-color: darkseagreen;
}

.grid-center {
  grid-column: 2 / 3;
  background-color: coral;
  text-align: center;
}

.grid-right {
  grid-column: 3 / 4;
  background-color: steelblue;
  text-align: right;
}

<h2>Flex example</h2>
<nav>
  <div>
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
  </div>
  <div class="logo">
    <a>Logo</a>
  </div>
  <div class="right">
    <a>Item 4</a>
  </div>
</nav>
<h2>Grid example</h2>
<div class="grid">
  <div class="grid-left">
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
    <a>Item 4</a>
    <a>Item 5</a>
  </div>
  <div class="grid-center">
    <a class="logo">Logo</a>
  </div>
  <div class="grid-right">
    <a>Item 4</a>
  </div>
</div>

Answer 2

每当我需要居中定位时，我通常默认为一个简单的绝对位置。当涉及垂直居中时，此方法也可以节省生命！

{{1}}

将导航项（或徽标）居中放置在导航栏中间

2 个答案: