Html 在导航杆中间响应一个导航项（或标志） 我似乎找不到一种优雅而灵敏的方法来自动将一个“徽标”定位在一个Navar的中心，考虑到更多的物品可以被添加或移除，而且它比固定的保证金号码更有意义（我知道我可以这样做）。p>

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

nav{
显示器：flex；
保证金：0自动；
最大宽度：600px；
}
a{
右边距：20px；
}
.标志{
保证金：0自动；
}

项目1
项目2
项目3
标志
项目4

每当我需要将某个东西居中时，我通常默认为一个简单的绝对位置。这种方法是一个救生圈，当它涉及到垂直居中以及

nav{
位置：相对位置；
最大宽度：600px；
}
.标志{
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
}

一种解决方案可能是将导航分为3个不同的部分，左、中、右。然后使用flex box来定位这些页面，但给它们一个最小值和最大值，即页面的三分之一。此外，您还需要将徽标居中，并右对齐右侧栏

可能一个更健壮的解决方案是使用CSS网格。同样的想法是将页面分成3列，但你可以将3列的宽度设置为1fr，而不是给出最小和最大宽度33.333333…%——我认为这是更优雅的解决方案。我也提供了一个例子

nav{
显示器：flex；
调整内容：灵活启动；
}
导航>分区{
最大宽度：33.3333%；
最小宽度：33.3333%；
}
.标志{
文本对齐：居中；
}
.对{
文本对齐：右对齐；
}
.电网{
显示：网格；
网格模板列：重复（3，1fr）；
}
.左格{
网格柱：1/2；
背景色：暗绿色；
}
.网格中心{
网格柱：2/3；
背景颜色：珊瑚；
文本对齐：居中；
}
.右网格{
网格柱：3/4；
背景颜色：钢蓝色；
文本对齐：右对齐；
}

Flex示例
项目1
项目2
项目3
标志
项目4
网格示例
项目1
项目2
项目3
项目4
项目5
标志
项目4

啊，是的，光荣的网格。我喜欢这个解决方案的简单性和灵活性。非常感谢。