img垂直对齐到ul？答案

【问题标题】：Img vertical align to ul?img垂直对齐到ul？
【发布时间】：2013-07-23 17:07:39
【问题描述】：

我想将徽标图像垂直对齐到导航菜单的底部。我试过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;
            }

【问题讨论】：

标签： image css html-lists vertical-alignment

【解决方案1】：

检查这个小提琴： http://jsfiddle.net/Nh6NZ/

如果你想垂直对齐这些元素，关键是你需要使用display:inline-block而不是浮动。而且浮动和绝对位置不能一起使用。

【讨论】：