@Denioo

Как сделать логотип на одном уровне со списком в середине спика?

Добрвый день, прокачиваю верстку, для тренировки верстки нашел макет из faq по фронту из гитхаба.
Столкнулся с проблемой не могу понять как решить, есть меню из списка ul li, по середине в спике стоит логотип, но если делаю position: relative;
то съезжать все меню в низ, прикреплю картинку к коду чтобы объяснить понятнее вот

Соответсвенно вот код html и css
spoiler
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Exo&display=swap" rel="stylesheet"> 
</head>
<body>    
    <div class="main">
        <div class="header">
            <div class="menu">
                <ul class="menu_header">
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">FUATURES</a></li>
                    <li><a class="selected" href="#">COUNTDOWN</a></li>
                    <li class="logo"><a href="#"><img src="./img/bc_18.png" alt=""></a></li>
                    <li><a href="#">PRICING</a></li>
                    <li><a href="#">TESTIMONIALS</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </div>            
        </div>
    </div>    
</body>
</html></spoiler>

Css

<spoiler title=""><code lang="css">
* {
    margin: 0px;
    padding: 0px;
}

/*
*
* Headers
* 
*/
div.header {
    height: 1090px;
    width: 1600px;    
    background: url(./img/picjumbocom_img_1596_12.png) no-repeat;
    background-position: center;
    background-color: transparent;
}

.menu {    
    height: 80px;
    width: 1600px;
    margin: 80px 0 0 0;
}

ul.menu_header {
    text-align: center;
}

ul.menu_header a {
    font-family: 'Exo', sans-serif;
    text-decoration: none;
    font-size: 15px;
    line-height: 19px;
    font-weight: 400;
    color: #919191;      
}

ul.menu_header a.selected {
    color:#de5749;
}

ul li {
    display: inline-block;
    padding: 20px;    
    justify-content: space-between;
    align-items: center;
}

.logo {
    position: relative;
    margin: 0 0 0 0;
      
}


</code>
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
hzzzzl
@hzzzzl
картинки надо на хабрастораж загружать, тот сайт не отдает картинку по прямому линку

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы