列表样式图像与css的垂直对齐

Question

我在 html 列表中使用图片作为子弹。但是，我无法获得正确的垂直对齐。我认为这张图片很好地解释了这个问题：

我想要的是让黑方块相对于文字居中。我怎么能得到这样的行为？

我尝试了vertical-align: middle;，但它不起作用。这是创建此图的 css 代码（请注意，我使用黑色正方形和红色边框来强调问题）：

#content ul{ 
  background: inherit;
  list-style-image:url('item-pin2.png');
  list-style-position: inside;
  margin-top:0px;
  vertical-align: middle;
  color: DimGray;
}

#content li{ 
  background: inherit;
  margin:0.0em;
  padding: 0.0em;
  vertical-align: middle;
  border-style: solid;
  border-color: red;
  border-width: 1px;
}

1