CSS圖標和文本對齊是每個前端開發人員都要處理的問題。在網頁設計中，我們經常需要在文本中使用一些小圖標，以提高頁面的可讀性和美觀程度。

實現圖標和文本對齊的方法有很多，但最常見的是利用CSS中的line-height屬性。該屬性控制文本行的高度，通常設置為與字體大小相同或稍大。當我們在同一行中放置文本和圖標時，可以通過設置line-height值，使它們垂直居中顯示。

.icon {
display: inline-block; /* 將圖標和文本都設置為內聯元素 */
width: 20px; /* 設置圖標的寬度和高度 */
height: 20px;
background-image: url('icon.png'); /* 引入圖標的圖片 */
background-size: cover; /* 將圖片填充整個元素 */
vertical-align: middle; /* 將圖標和文本對齊 */
}
span {
line-height: 20px; /* 設置行高，為圖標的高度 */
}

上面的代碼將一個span元素和一個背景圖片作為圖標放在同一行中。通過設置display: inline-block;屬性，我們將它們都轉換為內聯元素，從而使它們可以在同一行中顯示。

接下來，我們設置圖標的寬度和高度，并引入圖標的圖片。由于圖片可能比元素的實際大小小或大，我們將其設置為background-size: cover;屬性，以填充整個元素。最后，我們將圖標和文本垂直對齊，通過設置vertical-align: middle;屬性。

除了利用line-height屬性，我們還可以使用flexbox和grid布局。這兩種布局方式在對齊圖標和文本時更加靈活和方便。

總之，對齊圖標和文本是一項必要技能，幫助我們創建更美觀和易于閱讀的網頁。并且有多種實現方法，我們可以根據具體情況選擇合適的方式。