html - 如何在侧边栏的中心垂直和水平移动此导航栏

Question

图片有点长，请向下滚动查看代码。

我试图让这个导航栏垂直对齐，但它看起来太丑了。如何将 Logo 移动到导航链接的顶部，并将导航链接垂直和水平移动到导航的中心。导航栏必须全高且固定。这是代码:

.site-header  {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 18rem;
    height: 100vh;
        margin:auto !important
}

.logo {
     display: flex;
      margin: auto auto 0;
      padding: 0.5rem;
}

.primary-menu {
flex-direction: column;
 width: 100%;

}

.primary-menu > li {
    display: block; 
}

Answer 1

查看此代码片段。我看不到你的标志，这就是为什么我没有包括它。但你可以使用那里的格式来完成

.header {
   display: flex;
}

.header nav {
   margin: 0 auto;
}

.header nav ul {
   margin: 0;
   padding: 0;
}

.header nav ul > li {
   display: block;
   text-align: center;
}

.header nav ul > li > a {
   display: block;
   text-align: center;
   color: #333;
   padding: 7px 12px;
   text-decoration: none;
   font-family: Montserrat;
}

.header nav ul > li > a > img {
   display: inline-block;
   max-width: 100px
   max-height: 60px;
}

<div class='header'>
    <nav>
        <ul>
            <li><a href='/'><img src='' alt='logo' /></a></li>
            <li><a href='/'>Home</a></li>
            <li><a href='featurs'>Features</a></li>
            <li><a href='developers'>Developers</a></li>
            <li><a href='testimonials'>Testimonials</a></li>
            <li><a href='auth/signup' class='reg-btn'>Signup</a></li>
        <ul>
    </nav>
</div>