如何使用vertical-align：middle;正确？ [英] How to use vertical-align: middle; properly?

问题描述

我想让我的列表（nav）与图像（徽标）的中心对齐。我尝试使用 vertical-align：middle; ，但是我不能让它工作，当我浮动的图像左右。

I want to have my list (nav) align to the center of an image (logo). I tried using vertical-align: middle;, but I couldn't get it to work when I floated the images left and right.

这是我的代码：

HTML：

<div id="head">
    <img id="logo" src="logo.png" />
    <ul id="nav">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

CSS：

#head {
    margin-top: 2px;
    width: 100%;
}
    #logo {
        float: left;
        }

    ul#nav {
        float: right;
        }

        ul#nav li {
            display: inline;
            list-style-type: none;
            }

我把所有 vertical-align： '从我把它们放在哪里（我在每个元素中测试它，即使它只应用于#logo，从我读过的）。

I took all the vertical-align: middle;'s from where I put them (I tested it in each element, even though it was only supposed to be applied to #logo, from what I've read.)

无论如何，任何帮助将不胜感激。

Anyways, any help would be appreciated.

推荐答案

：middle 将子元素的中位数与父元素的中位数对齐。如果所有子元素都具有 float：left ，则父元素的高度为0px，因此其中位数高于子元素。

Vertical-align:middle aligns the median of child element to the median of parent element. If all child elements have float:left, then the parent has a height of 0px and hence its median is above the child elements.

所以，你可以在菜单之后添加< br style ='clear：both'/> ，DIV将最终得到它的垂直大小。

So, you might add a <br style='clear:both' /> after your menu and the DIV will finally get its vertical size.

这篇关于如何使用vertical-align：middle;正确？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！