如何在导航栏的左侧或中心添加徽标​​？

Question

我想在导航栏的左侧或中心添加一个徽标，谁能告诉我如何才能做到这一点？

我已经尝试过了，但是当我将这些行添加到我的代码中时，我的链接高于徽标，看起来徽标正在推动它们或其他东西。 有人吗？

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

这是我的代码：

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;900&display=swap");

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Nunito", sans-serif;
}

 .nav {
     background-color: #fff;
     overflow: hidden;
     justify-content: space-between;
}
 .nav a {
     float: left;
     display: block;
     color: rgba(0, 0, 0, 0.8);
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 0.75rem;
}
 .nav a:hover {
     background-color: #fff;
     color: #000;
}
 .nav .active {
     color: #000;
     font-weight: 600;
}
 .nav .icon {
     display: none;
}
 .nav .dropdown {
     float: left;
     overflow: hidden;
}
 .nav .dropdown:hover .dropbtn {
     background-color: #fff;
     color: #000;
}
 .nav .dropdown:hover .dropdown-content {
     display: block;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.10);
}
 .nav .dropdown .dropbtn {
     font-size: 0.75rem;
     border: none;
     outline: none;
     color: rgba(0, 0, 0, 0.8);
     padding: 14px 16px;
     background-color: inherit;
     margin: 0;
     font-family: "Nunito", sans-serif;
     cursor: pointer;
}
 .nav .dropdown-content {
     display: none;
     position: absolute;
     background: #fff;
     min-width: 160px;
     z-index: 1;
}
 .nav .dropdown-content a {
     float: none;
     color: #9b9b9b;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
     transition: 0.4s ease;
}
 .nav .dropdown-content a:hover {
     background-color: #fff;
     color: #000;
}
 

<div class="nav" id="topnav">
        <a href="/feed">Feed</a>
        <a href="/discover">Discover</a>
        <a href="/jobs">Jobs</a>
        <div class="dropdown">
            <button class="dropbtn">Profile</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="/about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </div>

它也可以居中，我也会很高兴。 谢谢！

Answer 1

尝试使用此代码：

<a href="link-to-website" class="logo-left"><img src="/path/to/image.png"></a>

Where I found the answer.

Answer 2

首先，justify-content: start; 仅适用于带有display: flex; 的元素。

在.nav 元素上使用display: flex;，使用align-items 使元素垂直居中；

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;900&display=swap");

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Nunito", sans-serif;
}

 .nav {
    background-color: #fff;
    overflow: hidden;
    justify-content: start;
    
    display: flex;         /* <-- */
    align-items: center;   /* <-- */
}
 .nav a {
     float: left;
     display: block;
     color: rgba(0, 0, 0, 0.8);
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 0.75rem;
}
 .nav a:hover {
     background-color: #fff;
     color: #000;
}
 .nav .active {
     color: #000;
     font-weight: 600;
}
 .nav .icon {
     display: none;
}
 .nav .dropdown {
     float: left;
     overflow: hidden;
}
 .nav .dropdown:hover .dropbtn {
     background-color: #fff;
     color: #000;
}
 .nav .dropdown:hover .dropdown-content {
     display: block;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.10);
}
 .nav .dropdown .dropbtn {
     font-size: 0.75rem;
     border: none;
     outline: none;
     color: rgba(0, 0, 0, 0.8);
     padding: 14px 16px;
     background-color: inherit;
     margin: 0;
     font-family: "Nunito", sans-serif;
     cursor: pointer;
}
 .nav .dropdown-content {
     display: none;
     position: absolute;
     background: #fff;
     min-width: 160px;
     z-index: 1;
}
 .nav .dropdown-content a {
     float: none;
     color: #9b9b9b;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
     transition: 0.4s ease;
}
 .nav .dropdown-content a:hover {
     background-color: #fff;
     color: #000;
}

<div class="nav" id="topnav">
    <a><img id='logo' src='https://placehold.it/150x40'/></a>
    <a href="/feed">Feed</a>
    <a href="/discover">Discover</a>
    <a href="/jobs">Jobs</a>
    <div class="dropdown">
        <button class="dropbtn">Profile</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="/about">About</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

Answer 3

我在 .nav 中添加了一个 css 代码

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

然后在底部添加.nav .logo-img

.nav .logo-img {
position:relative;
justify-content:start;
}

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;900&display=swap");

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Nunito", sans-serif;
}

 .nav {
     background-color: #fff;
     overflow: hidden;
     justify-content: space-between;
     align-items:center;
     display:flex
}
 .nav a {
     float: left;
     display: block;
     color: rgba(0, 0, 0, 0.8);
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 0.75rem;
}
 .nav a:hover {
     background-color: #fff;
     color: #000;
}
 .nav .active {
     color: #000;
     font-weight: 600;
}
 .nav .icon {
     display: none;
}
 .nav .dropdown {
     float: left;
     overflow: hidden;
}
 .nav .dropdown:hover .dropbtn {
     background-color: #fff;
     color: #000;
}
 .nav .dropdown:hover .dropdown-content {
     display: block;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.10);
}
 .nav .dropdown .dropbtn {
     font-size: 0.75rem;
     border: none;
     outline: none;
     color: rgba(0, 0, 0, 0.8);
     padding: 14px 16px;
     background-color: inherit;
     margin: 0;
     font-family: "Nunito", sans-serif;
     cursor: pointer;
}
 .nav .dropdown-content {
     display: none;
     position: absolute;
     background: #fff;
     min-width: 160px;
     z-index: 1;
}
 .nav .dropdown-content a {
     float: none;
     color: #9b9b9b;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
     transition: 0.4s ease;
}
 .nav .dropdown-content a:hover {
     background-color: #fff;
     color: #000;
}
.nav .logo-img {
    position:relative;
    justify-content:start;
}

<div class="nav" id="topnav">
        <a href="#" class="logo-img"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/1280px-Stack_Overflow_logo.svg.png" width="150px"></a>
        <a href="/feed">Feed</a>
        <a href="/discover">Discover</a>
        <a href="/jobs">Jobs</a>
        <div class="dropdown">
            <button class="dropbtn">Profile</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="/about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </div>