html - 保持 li 的垂直对齐

Question

遇到一个问题，如果“li”里面的“a”有两行文本，那么“li”比“li”高一行。

html 是一个标准的 div>ul>li 这是CSS

ul#menu-main-menu {
/*this is to make li's go beyond the container width*/
    position:absolute;
    left:16%;
    right:-100%;
    }
ul#menu-main-menu li {  
    display: inline-block;
    width: 148px;
    }        
ul#menu-main-menu li a {
    position: relative;
    height: 70px;
    margin: 0 5px;
    display: block;
    padding: 0 10px;
    }

jsfiddle 添加 https://jsfiddle.net/dLmwp5kp/

Answer 1

当属性设置为 display:inline-block 时，高度最大的元素与其他元素的中间对齐

可以在这里找到更详细的解释

http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

为 ul#menu-main-menu li 添加 vertical-align: middle; 它将垂直对齐

演示 - https://jsfiddle.net/dLmwp5kp/2/