image - img垂直对齐到ul？

Question

我想将徽标图像垂直对齐到导航菜单的底部。我试过vertical-align:text-bottom，但vertical-align似乎对我不起作用，因为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>

的CSS：

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

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

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

Answer 1

Check this fiddle: http://jsfiddle.net/Nh6NZ/

The key is you need to use display:inline-block instead of floating if you want to vertical-align those elements.and Also float and position absolute can't be used together.