как вертикально выровнять плавающее изображение

У меня есть это плавающее изображение, и я хотел бы, чтобы оно было слева от flex-navbar. Макет должен быть адаптивным, а изображение вертикально выровнено по середине (вертикальное выравнивание: посередине; не работает). Заранее спасибо!

https://jsfiddle.net/wonrpfsc/

<div class="container">
        <a href="#"><img id="logo" src="http://brandmark.io/logo-rank/random/apple.png" alt=""/></a>
    <div id="navbar">
        <a href="#">Home</a>
        <a href="#">About U</a>
        <a href="#">Our Service</a>
        <a href="#">Our Products</a>
        <a href="#">Contac</a>
    </div>
</div>



#navbar {
    display: flex;
}

#navbar a {
    flex: 1 1 0;
    text-align: center;
    padding: 10px;
    border: 1px solid black;
}

#logo {
    width: 10vw;
    height: 10vw;
    float: left;
    vertical-align: middle;
}

image vertical-alignment html css floating
person lologic    schedule 05.10.2017    source источник
comment
Пожалуйста, покажите пример вашей проблемы, используя пример кода.   -  person WizardCoder    schedule 06.10.2017
comment
см. jsfiddle выше   -  person lologic    schedule 06.10.2017
comment
Извиняюсь. Я думаю, что ослепну.   -  person WizardCoder    schedule 06.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете попробовать переместить логотип в блок навигации следующим образом:

'<div class="container">
    <div id="navbar">
       <a href="#"><img id="logo" src="http://brandmark.io/logo-rank/random/apple.png" alt=""/></a>
        <a href="#">Home</a>
        <a href="#">About U</a>
        <a href="#">Our Service</a>
        <a href="#">Our Products</a>
        <a href="#">Contac</a>
    </div>
</div>'

И измените CSS следующим образом:

#navbar {
    display: flex;
    justify-content: center;
    align-items: center;
}
person W. Van Pelt    schedule 05.10.2017