将img放在导航栏的中心，两侧各有2个导航按钮(左和右)

Question

所以我正在尝试制作一个类似于我在另一个网站上看到的导航栏(或标题？(。

我多么希望它成为

我已经成功地使徽标图像居中。但我在设计按钮(如About、Blog等(时遇到了问题，我应该使用float还是其他类型的样式？

这是我使图像居中的代码：

.nav {
z-index: 99;
display: table;
height: 100px;
width: 100%;
background-color: #fdf4e4;
}
.nav .logo {
margin-left: auto;
margin-right: auto;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#home_btn {
margin: 0;
width: 85px; height: 85px;
background-image: url(drone.png);
background-size: cover;
background-color: black;
border: transparent;
}

<div class="nav">
<div class="logo"><button id="home_btn"></button></div>
</div>

但一旦插入文本，图像就不再居中。

.nav {
z-index: 99;
display: table;
height: 100px;
width: 100%;
background-color: #fdf4e4;
}
.nav .logo {
margin-left: auto;
margin-right: auto;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#home_btn {
margin: 0;
width: 85px; height: 85px;
background-size: cover;
background-color: black;
border: transparent;
}
.navbar {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.navbar .about, .services, .help, .partner {
font-family: 'Sifonn Pro';
background-color: transparent;
border: transparent;
cursor: pointer;
font-size: 20px;
padding: 0 16px;
color: #061925;
text-align: center;
}

<div class="nav">
<div class="logo"><button id="home_btn"></button></div>
<div class="navbar">
<button class="about" type="button" onclick="window.location.href='.html'">About Us</button>
<button class="services" type="button" onclick="window.location.href='.html'">Services</button>
<button class="help" type="button" onclick="window.location.href='.html'">Help Centre</button>
<button class="partner" type="button" onclick="window.location.href='.html'">Be Our Partner</button>
</div>
</div>

我希望我的"关于我们"one_answers"服务"在导航栏的左侧，而"帮助中心"one_answers"成为我们的合作伙伴"在右侧。有人知道怎么做吗？有花车或任何东西都可以，只要我能得到类似于我从另一个网站上得到的样品。

Answer 1

使用grid-template-columns: auto min-content auto;创建一个3列网格。这样，徽标将居中，并且只使用所需的空间。左侧列和右侧列将相等地占用剩余空间。

nav {
display: grid;
grid-template-columns: auto min-content auto;
white-space: nowrap;
}
nav div:nth-child(1) {
text-align: left;
}
nav div:nth-child(1) a {
margin-right: 15px;
}
nav div:nth-child(3) {
text-align: right;
}
nav div:nth-child(3) a {
margin-left: 15px;
}
.logo {
width: 1em;
height: 1em;
background-color: black;
}

<nav>
<div>
<a href="">About Wolfin</a>
<a href="">Blog</a>
<a href="">Contact</a>
</div>
<div>
<div class="logo"></div>
</div>
<div>
<a href="">Collection</a>
<a href="">Stories</a>
<a href="">Shops</a>
</div>
</nav>