Html 按比例将列表样式图像与文本对齐

所以我有

<ul>
  <li>Hello</li>
</ul>

看起来像

---

正如您所看到的，

的文本和图像元素没有垂直对齐（图像高于文本），我尝试对其应用行高和垂直对齐（注释掉的代码），但它没有对齐。有没有办法实现良好的对齐？

当每个列表项只有一行时，您可以在

li

元素中添加一些

填充底部
，可以为li标记定义img标记或背景：url（…），而不是“列表样式图像”
填充只会影响文本元素中的任何内容，就你而言

唯一可用的位置调整属性是，但唯一允许的值是
继承
、
内部
或
外部
。最常见的做法是使用：

list-style: none;

然后应用所需图像作为
的背景

li {
    /** the image will be vertically aligned in the center **/
    background: url(../img/bullet.png) left center no-repeat; 

    /** move the text to the right **/
    padding-left: 20px; 
}

我还需要在background属性中添加“no repeat”（无重复）

<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>

文本上移5px
是的，但我有点想用列表样式的图像来解决这个问题。别忘了在背景属性中添加“不重复”。使用这种方法有一些优点。你可以很好地调整位置。当
文本换行时（想想手机），文本会与第一行的开头垂直对齐。如果项目符号img大于一行文本，则可能需要添加
min height
。
<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>