将 list-style-image 与 <li> 文本对齐答案

【问题标题】：Aligning list-style-image with <li> text将 list-style-image 与 <li> 文本对齐
【发布时间】：2018-03-23 08:11:22
【问题描述】：

我正在努力让列表样式图像与我的 <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>

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

谢谢，

山姆

【问题讨论】：

玩弄li里面a的对齐方式
谢谢那会是：a.custompiggy2 吗？会有戏。
.custompiggy2 a
谢谢，这很好。你知道如何在图片上叠加一个数字吗？
要覆盖什么数字？

标签： html css image alignment html-lists

【解决方案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>

【讨论】：