Question

我有一个带有背景图片的跨度，但它在没有文字的情况下以不同方式对齐，我怎样才能使它们与内容无关？

为此，它必须是内联块，并且它必须是仅css解决方案。

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属性，但是你需要确保clear浮动元素。

有关float和clear的详情，请参阅我的回答here和here。

Answer 2

http://jsfiddle.net/9YUdb/2/

.test
{
    display: inline-block;
    float: left;

}

Answer 3

要与周围的文字对齐，您需要为跨区提供一些内容。您可以使用:before伪元素执行此操作。将它设置为零宽度不间断空间将起到作用。即。

.test:before {
    content: '\FEFF';
}

请参阅http://jsfiddle.net/9YUdb/6/

span对齐不同的文本和没有文本

3 个答案: