如何使用 CSS 将背景图像放置在文本上方？

Question

我试图让我的 HTML 非常简单。我有一个集合列表，其中声明了类似于步骤集的向导的名称...

<div>
    <ul class="wizardBar">
        <li class="step1">Step One</div>
        <li class="step2">Step Two</div>
        <li class="step3">Step Three</div>
    </ul>
</div>

我的 CSS 文件中有以下内容来格式化它......

.wizardbar
{
  display:table;           
  padding:0;
  margin:0;
  white-space:wrap;
  list-style-type:none;
}
* html .wizardbar {
  display:inline-block;
  width:1px;
  padding:0 2px;
}
.wizardbar li
{
  display:table-cell;
  width: 116px;
  text-align: center;
  padding-top: 36px;
}
.step1
{
  background: url('Step1.gif') no-repeat;
}
.step2
{
  background: url('Step2.gif') no-repeat;
}
.step3
{
  background: url('Step3.gif') no-repeat;
}

我在这里想要完成的事情是......

步骤1.gif.....步骤2.gif.....步骤3.gif .
步骤1......步骤2......步骤3

其中步骤名称即：“STEP 1”出现在该步骤的图像下方。目前，文本位于图像之上。我不想要任何重叠。

谢谢，贾斯汀

Answer 1

将其添加到您的 css 文件中：

.div.wizardBar li {
padding-top: 50px;
}

摆弄顶部填充物，直到获得所需的正确距离。