列表项目符号与文本未对齐（上偏）问题求助

我的列表项目符号和文本无法正确对齐，具体表现为项目符号未完全居中，存在轻微上移情况。相关截图如下：

以下是我编写的HTML及CSS代码，整体未大幅偏离默认样式：

CSS代码 #

*,
*::before,
*::after {
  box-sizing: border-box;
}

ul {
  padding-left: 1.8em;
}

ul > li {
  padding: .1em 0;
}

li::marker {
  color: #1f93a1;
  font-size: 1.5rem;
  font-weight: 800;
}

ul > li > p {
  margin-top: 0;
  margin-bottom: 0;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>List Items</title>
  </head>
  <body>
    <ul>
      <li>First Item</li>
      <li>Second Item</li>
      <ul>
        <li>Sub-item</li>
        <li>Sub-item</li>
      </ul>
      <li>Third Item</li>
    </ul>
  </body>
</html>

可行解决方法 #

• 给li::marker添加垂直对齐属性，强制标记与文本居中：

  li::marker {
    color: #1f93a1;
    font-size: 1.5rem;
    font-weight: 800;
    vertical-align: middle;
  }
  

• 若上述方法效果不明显，调整li的行高，匹配标记尺寸：

  ul > li {
    padding: .1em 0;
    line-height: 1.8; /* 可根据实际显示效果微调数值 */
  }
  

• 排查浏览器默认样式干扰，重置ul和li的内外边距后重新设置：

  ul {
    margin: 0;
    padding-left: 1.8em;
  }
  
  ul > li {
    margin: 0;
    padding: .1em 0;
  }
  

内容的提问来源于stack exchange，提问作者Zoltan King