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

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>

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

标签： htmlcss

Answer 1

我在.navlike中添加了一个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>