如何垂直對齊列出的項目？

Question

在下面的例子中，我怎麼在左邊的菜單項垂直對齊。我想他們從頂部菜單的底部到瀏覽器的底部均勻分佈的。

有些事情要記住：

• 一旦顯示側面菜單應該在屏幕上滾過。
• 的H1應該在內容區域中居中

.TopMenuBar { 
 
    border: 1px solid purple; 
 
    background-color: purple; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.TopMenuBar ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.TopMenuBar li { 
 
    display: inline; 
 
    padding: 20px; 
 
} 
 
.TopMenuBar li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 20px; 
 
} 
 
.TopMenuBar li a:hover { 
 
    background-color: #b14eb1; 
 
    color: black; 
 
} 
 
.SideMenuBar { 
 
    background-color: orange; 
 
    margin-left: 20px; 
 
    margin-top: 0; 
 
    display: flex; 
 
    height: 100vh; 
 
    float: left; 
 
} 
 
.SideMenuBar ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    justify-content: space-between; 
 
} 
 
.SideMenuBar li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    display: list-item; 
 
} 
 
.SideMenuBar li a:hover { 
 
    background-color: #fcbf7e; 
 
    color: black; 
 
} 
 
main { 
 
    padding-left: 10px; 
 
    display: table 
 
} 
 
h1 { 
 
    text-align: center; 
 
}

<img src="#" width="100%" height="100px"> 
 
<div class="TopMenuBar"> 
 
    <ul> 
 
    <li><a href="#">Side</a> 
 
    </li> 
 
    <li><a href="#">Menu</a> 
 
    </li> 
 
    <li><a href="#">Bar</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="SideMenuBar"> 
 
    <ul> 
 
    <li><a href="#">Side</a> 
 
    </li> 
 
    <li><a href="#">Menu</a> 
 
    </li> 
 
    <li><a href="#">Bar</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 

 
<h1>h1 Header</h1> 
 
<main> 
 
    <h2>h2 Header</h2> 
 
    <p>Main paragraph</p> 
 
    <a href="#">Main link</a> 
 
    <ul> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    </ul> 
 
    <h2>h2 Header</h2> 
 
    <p>Main paragraph</p> 
 
    <a href="#">Main link</a> 
 
    <ul> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    </ul> 
 
</main>

Answer 1

添加柔性顯示器.SideMenuBar ul
justify-content: space-around - 如果你想他們不接觸頂部/底部邊緣。

.TopMenuBar { 
 
    border: 1px solid purple; 
 
    background-color: purple; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.TopMenuBar ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.TopMenuBar li { 
 
    display: inline; 
 
    padding: 20px; 
 
} 
 

 
.TopMenuBar li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 20px; 
 
} 
 

 
.TopMenuBar li a:hover { 
 
    background-color: #b14eb1; 
 
    color: black; 
 
} 
 

 
.SideMenuBar { 
 
    background-color: orange; 
 
    margin-left: 20px; 
 
    margin-top: 0; 
 
    display: flex; 
 
    height: 100vh; 
 
    float: left; 
 
} 
 

 
.SideMenuBar ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    justify-content: space-between; 
 
    display: flex; /*add*/ 
 
    flex-direction: column; /*add*/ 
 
} 
 

 
.SideMenuBar li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    display: list-item; 
 
} 
 

 
.SideMenuBar li a:hover { 
 
    background-color: #fcbf7e; 
 
    color: black; 
 
} 
 

 
main { 
 
    padding-left: 10px; 
 
    display: table 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
}

<img src="#" width="100%" height="100px"> 
 
<div class="TopMenuBar"> 
 
    <ul> 
 
    <li><a href="#">Side</a></li> 
 
    <li><a href="#">Menu</a></li> 
 
    <li><a href="#">Bar</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="SideMenuBar"> 
 
    <ul> 
 
    <li><a href="#">Side</a></li> 
 
    <li><a href="#">Menu</a></li> 
 
    <li><a href="#">Bar</a></li> 
 
    </ul> 
 
</div> 
 

 

 
<h1>h1 Header</h1> 
 
<main> 
 
    <h2>h2 Header</h2> 
 
    <p>Main paragraph</p> 
 
    <a href="#">Main link</a> 
 
    <ul> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    </ul> 
 
    <h2>h2 Header</h2> 
 
    <p>Main paragraph</p> 
 
    <a href="#">Main link</a> 
 
    <ul> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    <li>Main list item</li> 
 
    </ul> 
 
</main>