使用高度和行高垂直居中右边框不起作用答案

【问题标题】：Centering border-right vertically with height and line-height doesn't work使用高度和行高垂直居中右边框不起作用
【发布时间】：2014-09-12 23:53:24
【问题描述】：

有这样一条规则：“当你的行高等于你的父元素的高度时——你将文本居中。”正确的？它适用于我的代码中的字母 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;
}

【问题讨论】：

标签： html css centering

【解决方案1】：

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

对于li 跟随line-height，它们必须：不浮动并格式化为内联框（inline-block 或inline-table），以触发正确的布局。 p>

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;
 }

【讨论】：

【解决方案2】：

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

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

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

Updated Fiddle

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

如果您希望它完全适合其 40 像素高的父级，您如何将其更改为正确的 40px？

That fixes it.

【讨论】：

哦不，我需要它是 17px，就像在 psd 中一样，但是谢谢 ;]

【解决方案5】：

使用

display:inline

属性代替

float:left

查看此演示 - http://jsfiddle.net/unicode/g846u1nv/

【讨论】：