html - 如何垂直对齐水平列表中的元素

Question

我有水平列表，问题是列表中的第一个元素比其余元素大。所以，我得到类似 this 的信息.

如何对齐其他元素，使它们垂直“居中”？请注意，我不想让其他 li 元素更大(或更高)，我知道我可以通过指定顶部和底部边距手动完成，但我想避免它.

jsfiddle代码:

<div id="contentDiv">
            <div id="topMenu">
                <ul>
                    <li id='top_logo'></li>
                    <li>
                        1
                    </li>
                    <li>
                        2
                    </li>
                    <li>
                        3
                    </li>
                </ul>
                <br style="clear:both" />
            </div>

风格:

#topMenu ul li {
/* box size */
width: auto;
display: table;
float: left;
padding: 8px 10px 8px 10px;
margin: 5px;
/* color */
background-color:blue;
}


#top_logo{
background-color:red!important;
width:200px !important;
height:60px !important;
}

Answer 1

我经常在这种情况下使用行高。在这种情况下，将其设置为容器的高度 (60px)(编辑:不是具体的容器，而是您希望列表垂直居中的任何元素的高度)将产生一个垂直居中的列表项。

line-height: 60px;

这是从您的示例派生的示例:http://jsfiddle.net/EPCEs/1/