html - 跨度文本神秘地对齐到顶部

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>

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

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

Answer 1

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

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

的默认值line-height 大约是 1.2 倍（取决于浏览器）。

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

小提琴示例：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 spanCSS。

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

Answer 4

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

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