Question

有这条规则“当你的行高超过你父元素的高度时 - 你将文本居中。”对？它适用于我的代码中的字母LT和EN。我将ul 40px的高度和li的line-height设置为40px。一切都很美好但它不适用于边界权利。我需要它作为中心语言按钮之间的17px分隔符，但目前它是如此：http://jsfiddle.net/TomasRR/nxf5ey2a/

<ul class="lang">
    <li class="lt">
        <a href="#">LT</a>
    </li>
    <li class="en">
        <a href="#">EN</a>
    </li>
</ul>

CSS：

ul.lang {
    float: left;
    height: 40px;
    list-style:none;
}
ul.lang li {
    float: left;
    line-height: 40px;
}
ul.lang li:first-child {
    height: 17px;
    line-height: 40px;
    padding-right: 6px;
    border-right: 1px solid black;
}
ul.lang li:last-child {
    padding-left: 6px;
}
ul.lang li a{
    text-decoration: none;
    font-size: 12px;
    color: black;
}

Answer 1

垂直对齐仅适用于内联元素。

因此，不要浮动列表项，而是将它们显示为内联：

ul.lang li {
    display: inline;
    line-height: 40px;
}

Updated Fiddle

Answer 2

line-height应设置为ul并重置为li的正常。

要让li关注line-height，他们必须：不要浮动并将其格式化为内嵌框（inline-block或inline-table）这会触发正确的布局。

DEMO

 ul.lang {
     float: left;
     height: 40px;
     list-style:none;
     background:orange;
     line-height: 40px;
     padding:0 5px
 }
 ul.lang li {
     display:inline-block;/*no float*/
     vertical-align:middle;/* align from baseline/line-height of parent or highest box aside */ 
     line-height:1.2em;/* reset line-height to regular value */
 }
 ul.lang li:first-child {
     padding-right: 6px;
     border-right: 1px solid black;
 }
 ul.lang li:last-child {
     padding-left: 6px;
 }
 ul.lang li a {
     text-decoration: none;
     font-size: 12px;
     color: black;
 }

Answer 3

将填充和边框添加到<a>，它应该可以工作：

ul.lang li:first-child a {
  padding-right: 6px;
  border-right: 1px solid black;
}

Answer 4

ul.lang li:first-child {
    height: 17px;
}

如果你想让它完全适合40px的高父母，那你怎么把它改成正确的40px？

That fixes it

Answer 5

使用

display:inline

代替

的财产

float:left

请参阅此演示 - http://jsfiddle.net/unicode/g846u1nv/

垂直居中的边框 - 高度和线高不起作用

5 个答案: