如何使用 HTML 和 CSS 在导航菜单中垂直向下移动图像

Question

目前网页中有一个功能强大且可切换的导航菜单。图片也嵌入导航菜单中，位于文本下方。

最好将图像重新定位到导航菜单的最底部，以消除其下方的任何空白 space。实现此目标的最佳方法是什么？

这是上下文图片。

HTML

<html>
    <div id="sideNav">
        <nav>           
            <ul>
                <li><a href="#banner">HOME</a></li>
                <li><a href="#">COVID-19</a></li>
                <li><a href="#service">SERVICES</a></li>
                <li><a href="#reviews">REVIEWS</a></li>
                <li><a href="#footer">CONTACT</a></li>
            </ul>
                <div id="nav_pic">
                <img src ="images/nav_lotus.JPEG">
                </div>
        </nav>      
    </div>
</html>

CSS

#sideNav{
    width: 200px; /*changes the width of sideNav*/
    height: 100vh;
    position: fixed;
    right: -250px; /*make side bar intially hidden*/
    top:0;
    background: #009688;
    z-index: 2;
    transition: 0.33s;
}
.nav ul li{
    list-style: none;   
    margin: 45px 15px;
}
.nav ul li a{
    text-decoration: none;
    color: #fff;
    font-family: 'Raleway', sans-serif;
}
.nav_pic{
    vertical-align: bottom; 
}

Answer 1

将 flex 样式添加到 nav 容器。

nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

如何使用 HTML 和 CSS 在导航菜单中垂直向下移动图像

How to move an image vertically downwards inside a navigation menu with HTML and CSS

html

css

vertical-alignment