Выровнять по вертикали: средний

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

HTML

<nav>
        <ul id="nav">
        <li><a href="#">Boat</a>
                <ul class="boat">
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                    <li><a href="#">Page 4</a></li>
                    <li><a href="#">Page 5</a></li>
                </ul></li>
            <img src="images/logo.png"/>
            <li><a href="#">Experience</a>
                <ul class="experience">
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                    <li><a href="#">Page 4</a></li>
                    <li><a href="#">Page 5</a></li>
                </ul></li>

        </ul>
</nav>

CSS

* { 
   margin: 0px;
   padding: 0px;
}

header {
    width: 100%;
    text-align: center;
}

.center h1 {
    display: inline;
    vertical-align: 60%;
}


ul#nav {
    text-align: center;
    vertical-align:top;
}

ul#nav li {
    width: 125px;
    position: relative;
    margin-right:5px;
    line-height: 25px;
    border-radius: 10px;
    display: inline-block;
    padding: 5px;
}

ul#nav a {
   text-decoration: none;
   display: block;
   width: 125px;
   height: 25px;
   line-height: 25px;
   background-color: #f3f3f3;
   border: 1px solid #ccc;
   border-radius: 5px;
   text-align: center;
}

ul.boat, ul.experience {
   list-style-type: none;
   display: inline-block;
   text-align: center;
   font-size: 1em;
   position: absolute;
   top:100%;

}

ul#nav li:hover > a {
   background-color: yellow;
}

ul#nav ul.boat, ul.experience {
   display:none;
}

ul#nav li:hover ul.boat {
   display: block;
}

ul#nav li:hover ul.experience {
   display: block;
}

Спасибо за любую помощь, которую вы можете предоставить