Html 使用：before对齐图标旁边的文本

我正在尝试将我的文本与图标对齐，但是无论我做什么，它都因为某些原因无法工作

我试着摆弄

top

或

margin

，但它似乎仍然不想与图标对齐。有什么想法吗

CSS:

HTML:

一环
一环
一环
一环

结果表明：

您尝试过“垂直对齐”吗？它似乎有效

.lock:before {
    content:url('https://cdn3.iconfinder.com/data/icons/simplius-pack/512/pencil_and_paper-16.png');
    vertical-align: -10%;    
}

---

我不知道你为什么要使用：before，因为你有一个空的I标签，你想在它之前添加内容。为什么不像这样在i标记（.lock）上添加图标作为背景呢

.lock{
背景：url（'https://cdn3.iconfinder.com/data/icons/simplius-pack/512/pencil_and_paper-16.png“）无重复中心；
显示：内联块；
宽度：30px；
高度：30px；
文本对齐：居中；
垂直对齐：中间对齐；
}
.子菜单链接{
列表样式：无；
利润率：10px0；
左侧填充：30px；
}
跨度{
显示：内联块；
背景颜色：粉红色；
垂直对齐：中间对齐；
}

一环
一环
一环
一环




一环
一环
一环
一环




一环
一环
一环
一环

如果要垂直居中，可以使用线条高度 例如，如果.lock高度为30px，那么将行高度：设置为跨度为30px

<li class="subMenu">
    <a href="">
        <i class="lock"></i>                   
        <span>User Account</span>
    </a>
    <ul class="subMenu-link">
        <li>One Link</li>
        <li>One Link</li>
        <li>One Link</li>
        <li>One Link</li>
    </ul>                               
</li>

.lock:before {
    content:url('https://cdn3.iconfinder.com/data/icons/simplius-pack/512/pencil_and_paper-16.png');
    vertical-align: -10%;    
}