html - 将导航栏链接居中并与 Logo 保持垂直对齐

Question

在阅读了一些现有的问答后，我在我的 CSS 中尝试了很多东西，但(还)没有任何效果。

基本上，我需要的是一个导航栏，其中的链接位于页面的中央，并且 Logo float 在右侧。我希望它们垂直对齐。

当链接位于左侧但无法居中时设法使它们垂直对齐!试过玩 margin: 0 auto;但无济于事。

此外，我确信我的代码可能没有尽可能高效，所以如果有人对此有任何意见，我们非常欢迎。

这是 html:

    /* Add a black background color to the top navigation*/ 
    #stickyNav {
        background-color: black;
        overflow: hidden;
    }

    /* Style the links inside the navigation bar*/ 
    #stickyNav a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 20px 16px;
        text-decoration: none;
        font-size: 20px;
        vertical-align: middle;
    
    }

    /* Change the color of links on hover*/ 
    #stickyNav a:hover {
        color: #6400aa;
    }

    /*change color of links on click*/
    #stickyNav a:active {
      color: #e60050;
  
    }

    #Logo {
      display: inline-block;
      float: right;
      margin:0;
      padding:0;
      border:0;
    
    }

    <header>
    <nav id="stickyNav">
    <a href="index.html">home</a>
    <a href="about.html">about</a>
    <a href="services.html">services</a>
    <a href="catalogue.html">catalogue</a>
    <a href="blog.html">blog</a>
    <a href="contact.html">contact</a>


    <div id="Logo"><img id="Logo" src="Images/Logo.png" alt="Logo"     style="max-width:25%;height:auto;"></div>
    </nav>
    </header>

Answer 1

设置<a>标记为 display:inline;并添加 text-align:center; padding:20px 0;至 #stickyNav .