如何将我的徽标放在导航栏的中心？ [复制]

Question

我想将我的徽标放在导航栏的中心，我该怎么做？

我正在使用 Bootstrap 4 Utilities，所以我尝试了mx-auto，但它似乎没有用。

所以我假设要设置一些与 flexbox 相关的属性，但我不知道该使用哪一个，因为我认为我的代码非常混乱。

我的意思是，这不是制作导航栏的正确方法，但我这样做是为了让它更容易响应，即使我必须更好地设置它。

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  background: #fff;
  color: #191919;
  height: 110vh;
  font-family: 'Nunito Sans', sans-serif;
}

#logo {
  max-width: 100px;
  display: inline-block;
}

.nav {
  clear: both;
  background-color: #fff;
  overflow: auto;
  justify-content: start;
  display: flex;
  align-items: center;
}

.nav a {
  display: block;
  color: #191919;
  text-align: center;
  padding: 18px 14px;
  font-weight: 800;
  text-decoration: none;
  font-size: 1rem;
  display: inline-block;
}

.nav a:hover {
  color: #191919 !important;
}

.nav .dropdown {
  float: left;
  overflow: hidden;
}

.nav .dropdown:hover .dropbtn {
  background-color: #fff;
  color: #191919;
}

.nav .dropdown:hover .dropdown-content {
  display: block;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.nav .dropdown .dropbtn {
  font-size: 1rem;
  border: none;
  outline: none;
  color: #191919;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  cursor: pointer;
}

.nav .dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 160px;
  z-index: 1;
}

.nav .dropdown-content a {
  float: none;
  color: #191919;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  transition: 0.4s ease;
  font-weight: 600;
}

.nav .dropdown-content a:hover {
  background-color: rgba(25, 25, 25, 0.034);
  color: #191919;
}

.nav .account {
  color: #191919;
  line-height: 1;
  font-size: 1rem;
  font-weight: 600;
}

<div class="nav" id="topnav">
  <a href="/">
    <img src="https://nosfera.app/assets/img/logo.png" id="logo" alt="">
  </a>
  <a href="/">Home</a>
  <a href="/feed">Feed</a>
  <a href="/discover">Discover</a>
  <a href="/messages">Messages</a>
  <div class="dropdown">
    <button class="dropbtn">Account</button>
    <div class="dropdown-content">
      <a href="/profile">My profile</a>
      <a href="/projects">My projects</a>
      <a href="/settings">Settings</a>
      <a href="/help">Help</a>
    </div>
  </div>

  <a href="/login" class="account" alt="Log in">Log in (or <strong>sign up</strong>)</a>
  <a href="/logout" class="account" alt="Log out">Log out</a>
</div>

请原谅我的英语。

Answer 1

首先，将这三个部分包装为菜单、徽标和登录-登录。然后导航元素将 justify-items 更改为 space-between。将您的徽标部分作为第二部分移动。

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  background: #fff;
  color: #191919;
  height: 110vh;
  font-family: 'Nunito Sans', sans-serif;
}

#logo {
  max-width: 100px;
  display: inline-block;
}

.nav {
  clear: both;
  background-color: #fff;
  overflow: auto;
  justify-content: space-between;
  display: flex;
  align-items: center;
}

.nav a {
  display: block;
  color: #191919;
  text-align: center;
  padding: 18px 14px;
  font-weight: 800;
  text-decoration: none;
  font-size: 1rem;
  display: inline-block;
}

.nav a:hover {
  color: #191919 !important;
}

.nav .dropdown {
  float: left;
  overflow: hidden;
}

.nav .dropdown:hover .dropbtn {
  background-color: #fff;
  color: #191919;
}

.nav .dropdown:hover .dropdown-content {
  display: block;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.nav .dropdown .dropbtn {
  font-size: 1rem;
  border: none;
  outline: none;
  color: #191919;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  cursor: pointer;
}

.nav .dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 160px;
  z-index: 1;
}

.nav .dropdown-content a {
  float: none;
  color: #191919;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  transition: 0.4s ease;
  font-weight: 600;
}

.nav .dropdown-content a:hover {
  background-color: rgba(25, 25, 25, 0.034);
  color: #191919;
}

.nav .account {
  color: #191919;
  line-height: 1;
  font-size: 1rem;
  font-weight: 600;
}

<div class="nav" id="topnav">
<div>
  <a href="/">Home</a>
  <a href="/feed">Feed</a>
  <a href="/discover">Discover</a>
  <a href="/messages">Messages</a>
  <div class="dropdown">
    <button class="dropbtn">Account</button>
    <div class="dropdown-content">
      <a href="/profile">My profile</a>
      <a href="/projects">My projects</a>
      <a href="/settings">Settings</a>
      <a href="/help">Help</a>
    </div>
  </div>
  </div>
  <div>
    <a href="/">
    <img src="https://nosfera.app/assets/img/logo.png" id="logo" alt="">
  </a>
  </div>
  <div>
  <a href="/login" class="account" alt="Log in">Log in (or <strong>sign up</strong>)</a>
  <a href="/logout" class="account" alt="Log out">Log out</a>
    <div>
</div>