Блог

Главная - Вопросы по программированию - Как переместить изображение вертикально вниз внутри меню навигации с помощью HTML и CSS

Как переместить изображение вертикально вниз внутри меню навигации с помощью HTML и CSS

#html #css #vertical-alignment

#HTML #css #выравнивание по вертикали

Вопрос:

В настоящее время на веб-странице есть функциональное и переключаемое меню навигации. Изображение также встроено в меню навигации, расположенное под текстом.

Было бы неплохо переместить изображение в самый низ меню навигации, чтобы исключить пустое пространство под ним. Каков наилучший подход для достижения этой цели?

Вот картинка для контекста.

введите описание изображения здесь

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; 
}

Комментарии:

1. Вы имеете в виду выровнять изображение по нижней части страницы или по нижней части последней ссылки?

2. В самом низу меню навигации, чтобы зеленый прямоугольник под изображением больше не присутствовал.

Ответ №1:

Добавьте гибкий стиль в nav контейнер.

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