首页 文章

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

提问于
浏览 次
-1

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

enter image description here

我试图使这个导航栏垂直对齐，而它看起来太难看了 . 如何将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; 
}
html css html5 css3

2 回答

  • 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>
    回复于
  • 0

    请使用以下css：

    .site-header  {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin:auto !important;
    right: 0;
    bottom: 0;
}
.logo {
     display: block;
     margin: auto auto 0;
     padding: 0.5rem;
}
.primary-menu {
    flex-direction: inherit;
    width: 100%;
}
.primary-menu > li {
    display: block; 
}
    回复于

相关问题