Html Span文本神秘地对齐到顶部

我已经为此奋斗了几个小时。这一跨度中的文本神秘地与跨度顶部对齐。以下是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>

数据交换


SOAP/Axis2

你能告诉我为什么这个和上面对齐吗？我想把它放在中间

---

和JSFIDLE，相同的代码导致文本位于中心。这是否意味着层次结构中较高的CSS元素可能是导致此问题的原因？

无行高。使其与高度相同，18px或100%

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

---

没有线条高度。使其与高度相同，18px或100%

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

---

尝试将

行高：18px

添加到

中

编辑：刚刚意识到蒂姆·梅多拉已经说过了。忽略我。
尝试将
行高：18px
添加到
。技能li span
CSS

编辑：刚刚意识到蒂姆·梅多拉已经说过了。忽略我。
将
行高设置为元素的
高度值是垂直对齐文本的最简单方法

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

将
行高
设置为元素的
高度
是垂直对齐文本的最简单方法

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

…相同的代码导致文本位于中心。做
这意味着层次结构中更高的CSS元素可能导致了它

我想象您的实际样式表中的祖先将
行高度设置为小于18px。您可以查看实际样式表中该元素的计算行高，以查看应用了什么值

行高的默认值（取决于浏览器）

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

小提琴示例：

…相同的代码导致文本位于中心。做
这意味着层次结构中更高的CSS元素可能导致了它

我想象您的实际样式表中的祖先将
行高度设置为小于18px。您可以查看实际样式表中该元素的计算行高，以查看应用了什么值

行高的默认值（取决于浏览器）

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

fiddle示例：
将您的代码放在一个列表中，我认为您还应该添加用于显示css样式的HTML，以提供更好的整体图片。我猜行高小于18px。示例：更新和js fiddle Posted将您的代码放在a中，我认为您还应该添加用于显示css样式的HTML，以提供更好的整体图片。我猜行高小于18px。示例：更新和js fiddle发布