跨度文本神秘地对齐顶部

Question

我几个小时都在争吵。此跨度中的文本神秘地对齐到跨度的顶部。以下是Firebug的截图：

这是我相关的CSS块：

.skills {
    overflow:hidden;
    height:100%;
}


.skills li{
    border-bottom:1px dotted black;
    position:relative;
    width:200px;
    height:18px;
    margin-left:13px;
}

.skills li span{
    display:inline-block;
    position:relative;
    background:white;
    bottom:0px;
    height:100%;
    padding:0 5px; 
}

这是HTML：

<h4 class="main-heading"><span>Data Exchange</span></h4>
<ul class="skills">
    <li>
        <span>SOAP/Axis2</h4>
    </li>
</ul>

你能说出为什么这与顶部对齐吗？我希望它在中心。

和here is jsFiddle，其中相同的代码导致文本位于中心。这是否意味着层次结构中较高的CSS元素可能会导致它？

Answer 1

  

...相同的代码导致文本位于中心。是否   这意味着层次结构中较高的CSS元素可能会导致它？

我认为实际样式表中的祖先将line-height设置为小于18px。您可以查看实际样式表中该元素的计算行高，以查看正在应用的值。

line-height is roughly 1.2x的默认值（取决于浏览器）。

将line-height设置为等于包含元素的非填充高度，以垂直对齐单行文本（在本例中为18px）。

示例小提琴：http://jsfiddle.net/4vq42/

Answer 2

没有行高。使其与高度相同，为18px或100％。

.skills li span{
    display:inline-block;
    position:relative;
    background:white;
    bottom:0px;
    height:100%;
    line-height:18px;
    padding:0 5px; 
}

Answer 3

尝试将line-height: 18px添加到.skills li span CSS。

编辑：刚刚意识到蒂姆梅多拉已经说过这个了。不理我。

Answer 4

将line-height设置为元素height的值是垂直对齐文字的最简单方法。

.skills li {
    height:18px;
    line-height:18px;
}