在导航栏中居中 img，每侧 2 个导航按钮（左右）答案

【问题标题】：Center an img in a navbar, 2 navigation buttons on each side (left and right)在导航栏中居中 img，每侧 2 个导航按钮（左右）
【发布时间】：2020-12-15 01:35:26
【问题描述】：

所以我正在尝试制作一个导航栏（或标题？）类似于我从另一个网站在线看到的内容。

how i wanted it to be

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

这是使图像居中的代码：

.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>

我希望我的“关于我们”和“服务”位于导航栏的左侧，而“帮助中心”和“成为我们的合作伙伴”位于右侧。有谁知道该怎么做？使用浮点数或任何东西都可以，只要我能得到类似于我从另一个在线网站获得的样本即可。

【问题讨论】：

使用 flex-box 或 CSS-Grid。除非您想将其用于显示数据，否则不要使用表格。

标签： html css navigation header navbar

【解决方案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>

【讨论】：