在網頁設計中，列表是一個經常使用的元素。而在列表中添加圖標可以為設計增添色彩和美感。但是，有時候我們會發現文字與圖標對齊不夠準確。本文將介紹如何通過 CSS 實現列表圖標與文本對齊。 首先，我們需要在 HTML 中為列表項添加圖標?？梢允褂?span 標簽或 i 標簽來添加圖標，例如：

<ul>
<li><i class="fa fa-check"></i> 完成任務1</li>
<li><i class="fa fa-check"></i> 完成任務2</li>
<li><i class="fa fa-check"></i> 完成任務3</li>
</ul>

以上代碼使用了 Font Awesome 圖標庫中的“check”圖標。當然，你也可以使用其他的圖標庫或自定義圖標。 然后，我們需要使用 CSS 調整圖標與文本的位置。可以使用以下代碼實現圖標垂直居中：

li {
display: flex;
align-items: center;
}
li i {
margin-right: 5px;
}

以上代碼使用了 flex 布局和 align-items 屬性實現了圖標和文本的垂直居中。在 i 標簽中添加 margin-right 屬性，可以讓文本與圖標間距適當。 如果你想讓圖標和文本在水平方向上對齊，則可以使用以下代碼：

li {
position: relative;
padding-left: 20px;
}
li i {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}

以上代碼給 li 標簽添加了 position: relative 屬性，然后使用 padding-left 屬性給文本留出空間。i 標簽添加了 position: absolute 屬性，并使用 left 和 top 屬性定位到列表項的左側，使用 transform 屬性實現垂直居中。 通過以上代碼，我們可以實現列表圖標與文本對齊。當然，這只是其中的一種方法，你可以自由地探索和嘗試不同的方法。