html - 在 <li> 的跨度内时如何向上移动文本

Question

我有以下内容:

<li>
<a class="dw"><span>Design Goals</span></a>
</li>

.dw {
   background-image: url(/Content/images/icons/fugue/document-globe.png);
}

在我的浏览器中查看时，我看到类似这样的内容

iii
iii  xxxxxxxxxxxxxxx
iii  xxxxxxxxxxxxxxx

其中 i 代表图像，x 代表文本“设计目标”。

有什么方法可以让背景图像下推或上推 文本，以便我可以让他们更多地排队。我尝试添加填充 和跨度的边距但这似乎不起作用。我也试过 行高的不同组合，但这也不起作用。

我试过:background-position: center 但它看起来像这样:

             iii
       xxxxxxiiixxxxxx
       xxxxxxxxxxxxxxx

Answer 1

使用 background-position .

例如:

background-position: center 100px;