我正在做一个项目，我遇到了一个问题，我不知道如何正确地设计我的垂直导航。 我想它是覆盖整个高度和以下方式（垂直从上到下）:DIV元素的标志与相同高度的列表项目和没有边距，导航列表项目与图像在中间和文本在他们下面，有一点边距在顶部和底部。 这是我现在的密码-

HTML:

    <div className="Dashboard">
    <nav className="SideBox">
        <img className="SideLogo" src={Logo}></img>
        <ul>
            <li><img src={Logo}/><p>Accounts</p></li>
            <li><img src={Logo}/><p>Transactions</p></li>
            <li><img src={Logo}/><p>Documents</p></li>
            <li><img src={Logo}/><p>Wallet</p></li>
            <li><img src={Logo}/><p>Calendar</p></li>
            <li><img src={Logo}/><p>Settings</p></li>
        </ul>
    </nav>
    </div>

CSS:

.Dashboard {
   width: 100%;
   height: 100%;
}

.Dashboard * {
    width: 150px;
    height: calc(100vh / 7);
    background-color: blue;

}

.SideLogo {
    margin: 0 0;
    padding: 0 0;
    display: block;
}

.Dashboard ul {
    text-align: center;
    list-style: none;
    margin: 0 0;
    padding: 0 0;
}

.Dashboard li {
    text-align: center;
    margin: 10px 0;

}

.Dashboard img {
    display: block;
    height: 90%;
}