Image Img垂直对准ul？

我想将徽标图像垂直对齐到“我的导航”菜单的底部。我尝试过垂直对齐：文本底部，但垂直对齐似乎不适合我，因为ul不像普通的p标签那样工作。 有人能帮我吗

        <a href="index.php">
            <img id="logo" alt="logo" src="http://dyrholmkantinedrift.dk/img/kantinedrift_logo01.png" height="50">
        </a>
        <ul id="nav">
            <li><a href="#" title="Home">Home</a></li>
            <li><a href="#" title="About">About</a></li>
            <li><a href="#" title="Services">Services</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
            <li><a href="#" title="Pellentesque">Pellentesque</a></li>
            <li><a href="#" title="Aliquam">Aliquam</a></li>
            <li><a href="#" title="Morbi">Morbi</a></li>
        </ul>

检查这把小提琴：

关键是如果要垂直对齐这些元素，需要使用

display:inline block

而不是float。而且float和position absolute不能一起使用

            header img {
                float:left;
                position:absolute;
            }

            ul {
                height:50px;
                position:relative;
              }

            ul li {
                display:inline-block;
                bottom:0;
            }