html - span 与文本和无文本的对齐方式不同

Question

我有一个带有背景图像的跨度，但它的对齐方式不同，其中没有文本，我怎样才能使它们独立于内容对齐？

为此，它必须是内联 block ，并且必须是仅 CSS 的解决方案。

这是一个example .

HTML:

Test
<span class="test">Blafffff</span>
<span class="test"></span>

CSS:

.test
{
    display: inline-block;
    line-height: 30px;
    border: none;
    height: 30px;
    width: 120px;
    text-align: center;
    margin-top: -15px;
    background: url("http://i.imgur.com/vYiCjoF.png") no-repeat;
}

编辑:感谢到目前为止的答案，但它必须与周围的其他文本保持一致，我更新了 example

Answer 1

您正在使用display: inline-block;，因此span将与基线对齐，因此使用vertical-align : top; 使它们保持一致。

Demo

.test {
    /* Other properties */
    vertical-align: top;
}

或者，您也可以在这里使用 float: left; ，这样您就不需要 vertical-align 属性，但您需要确保 清除 float 元素。

---

更多关于float和clear的信息，可以引用我的回答here和here .