使导航栏链接居中并与徽标保持垂直对齐

Question

在阅读了一些现有的q＆a之后，我已经在我的CSS中尝试了很多东西，但没有（尚未）工作。

基本上我需要的是一个导航栏，其中链接以页面为中心，徽标浮动到右侧。我希望它们垂直对齐。

当链接在左侧但不能让它们居中时，管理它们使它们垂直对齐！试过玩保证金：0自动;但无济于事。

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

这是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。

Answer 2

有两种方法：

1. 您可以为a-elements创建容器并将其应用于margin：0 auto
2. 应用display：flex，justify-content：center为stickyNav，position为：absolute，right：0为logo

Answer 3

我建议你使用现在所有现代浏览器支持的display: flex;。

在你的CSS中添加以下内容：

#stickyNav {
     display: flex; // #stickyNav now becomes a flex container
     background-color: black;
     overflow: hidden;
}


#stickyNav a:first-child, #stickyNav #Logo {
    margin-left: auto; // this does the trick
}

PS：display: flex;不受恐龙Internet Explorer的支持，为了获得更广泛的支持，为Chrome，FireFox，Opera添加古代版本的供应商前缀......

希望我能够让你更进一步。