如何在无序列表项上对齐图像

<style>
    .list-item {
        background: url('image.jpg') no-repeat left center;
        padding-left: 20px; /* 根据图像宽度调整左边距 */
    }
</style>

<ul>
    <li class="list-item">列表项1</li>
    <li class="list-item">列表项2</li>
    <li class="list-item">列表项3</li>
</ul>

<ul>
    <li>
        <img src="image.jpg" alt="图像" style="vertical-align: middle; margin-right: 10px;">
        列表项1
    </li>
    <li>
        <img src="image.jpg" alt="图像" style="vertical-align: middle; margin-right: 10px;">
        列表项2
    </li>
    <li>
        <img src="image.jpg" alt="图像" style="vertical-align: middle; margin-right: 10px;">
        列表项3
    </li>
</ul>