将列表样式图像与<li>文本对齐

Question

我正在努力让列表样式图像与我的<li>文本保持一致。它看起来像这样：

正如您所见，存钱罐图像的显示略高于文本。

这是我的CSS：

ol.custompiggy2 {
    list-style-image: url('/wp-content/uploads/2018/03/Simple-piggy-bank-30.png');
}


.custompiggy2 ol>li {
    list-style-type: none;
    counter-increment: step-counter !important;
}

ol.custompiggy2 {
    margin-left: 50px;
}

这是我的HTML：

<ol class="custompiggy2">
<li><a href="#goal1">Goal 1. Live in surplus</a></li>
<li><a href="#goal2">Goal 2. Start paying yourself first</a></li>
<li><a href="#goal3">Goal 3. Begin Investing (ideally in an investment ISA)</a></li>
<li><a href="#goal4">Goal 4. Begin to live frugally</a></li>
<li><a href="#goal5">Goal 5. Get a free pay rise through your pension</a></li>
<li><a href="#goal6">Goal 6. Grasp the power of compound interest</a></li>
<li><a href="#goal7">Goal 7. Upskill yourself</a></li>
</ol>

知道如何解决这个问题吗？

谢谢，

萨姆

Answer 1

考虑a内li的对齐方式。这是一个例子：

ol.custompiggy2 {
  list-style-image: url('https://lorempixel.com/60/50/');
}
/* You need to correct this selector*/
ol.custompiggy2>li {
  list-style-type: none;
  counter-increment: step-counter !important;
}

ol.custompiggy2 {
  margin-left: 50px;
}

li a {
  vertical-align: top;
  display: inline-block;
  margin-top: 15px;
}

<ol class="custompiggy2">
  <li><a href="#goal1">Goal 1. Live in surplus</a></li>
  <li><a href="#goal2">Goal 2. Start paying yourself first</a></li>
  <li><a href="#goal3">Goal 3. Begin Investing (ideally in an investment ISA)</a></li>
  <li><a href="#goal4">Goal 4. Begin to live frugally</a></li>
  <li><a href="#goal5">Goal 5. Get a free pay rise through your pension</a></li>
  <li><a href="#goal6">Goal 6. Grasp the power of compound interest</a></li>
  <li><a href="#goal7">Goal 7. Upskill yourself</a></li>
</ol>