Как выровнять по высоте содержимое тега div и menu?

Приспичило, а иначе не скажешь, мне начать верстать сайт с тегами html5, а мат.часть знаю плохо, но знаю немного. Решил верстать не дивами, а использовать тег menu, но столкнулся с проблемой, что не могу собрать выпадающее меню и не могу выровнять логотип с кнопками меню. Тег сам понравился тем, что не надо париться с тем, чтобы элементы тега выставить по ширине экрана. Для полноты картины, прикладываю нужную часть html/css кода и картинку - как это выглядит прямо сейчас. Полазил в google, youtube - ответа не нашел внятного. Ну и под конец суть вопросов:

1. Как выровнять высоту кнопок тега menu относительно логотипа?
2. Как сделать, чтобы тег menu отображал выпадающие пункты (закомментированы)?

Часть кода html
<body>
    <menu class="navbar">
        <li>
            <img class="logo" src="img/bibl_logo.png" alt="home">
            <button>Ресурсы</button>
            <!--<menu class="submenu"> вложенное меню
                <li>
                    <button>Фонды</button>
                    <button>Каталоги</button>
                    <button>Переодические издания</button>
                    <button>Краеведение</button>
                </li>
            </menu>-->
            <button>Читателям</button>
            <!--<menu class="submenu"> вложенное меню
                <li>
                    <button>Советуем почитать</button>
                    <button>Виртуальные выставки</button>
                    <button>Наши буктрейлеры</button>
                </li>
            </menu>-->
            <button>О нас</button>
            <!--<menu class="submenu"> вложенное меню
                <li>
                    <button>Структура ГЦБС</button>
                    <button>Официальные документы</button>
                    <button>Услуги</button>
                    <button>Вакансии</button>
                </li>
            </menu>-->
            <button>Контакты</button>
            <!--<menu class="submenu"> вложенное меню
                <li>
                    <button>Обратная связь</button>
                </li>
            </menu>-->
            <button>Карта сайта</button>
            <button>Соц.сети (модуль)</button>
        </li>
    </menu>
<body>

Часть кода css
.navbar{
    margin: 0;
    padding: 0;
    text-align: center;
    background: #f0f0f0;
}

.navbar, li{
    list-style-type: none;
}

.navbar, button{
    font-weight: bolder;
    text-transform: uppercase;
    color: red;
    text-decoration: none;
    padding: 8px 20px;

.logo{
    margin: 0;
    padding: 0;
    width: 4%;
    height: auto;
}

Как это выглядит сейчас
61dea4775d9e1927915167.png


P. S. Да, знаю, что img будет правильнее обернуть в div и последнему уже присваивать класс, а не как сделал я
  • Вопрос задан
  • 108 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Artikoar
Первое попробуй с помощью:
.navbar {
    display: flex;
    align-items: center;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы