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

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

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

Img垂直对齐到ul？

1 个答案: