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

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

我经常使用的line-height在这样的情况下。在这种情况下，将其设置为容器（60像素）的高度（编辑：未进行具体的容器，但你想要的任何元素与垂直居中列表的高度）将产生垂直居中列表项。

line-height: 60px;

下面是你的榜样分叉的例子：http://jsfiddle.net/EPCEs/1/