使用 CSS 實現圖標對齊是網頁開發中經常遇到的一個問題。本文將介紹幾種常見的 CSS 圖標對齊方式，幫助開發者更好地實現圖標對齊效果。 1. 垂直居中對齊 在某些情況下，我們希望圖標能夠垂直居中。這時，可以使用如下 CSS： ```css .parent { display: flex; align-items: center; } ``` 其中，`.parent` 為外層容器元素，`display: flex` 可以讓內部元素自動并排排列。`align-items: center` 則是設置所有子元素在垂直方向上居中對齊。 2. 水平居中對齊 有時候，我們需要將圖標水平居中。這時，可以使用如下 CSS： ```css .parent { text-align: center; } ``` 其中，`.parent` 為外層容器元素，`text-align: center` 則是設置子元素在水平方向上居中對齊。 3. 圓形圖標對齊 有時候，我們希望將圖標設置成圓形的。這時，可以使用如下 CSS： ```css .icon { width: 30px; height: 30px; border-radius: 50%; } ``` 其中，`.icon` 為圖標元素，`width` 和 `height` 分別設置圖標的寬度和高度。`border-radius: 50%` 則是設置元素的圓角為 50%，從而實現圓形效果。 4. 文字和圖標對齊 在網頁開發中，我們經常需要將圖標和文本一起使用。這時，可以使用如下 CSS： ```css .parent { display: flex; align-items: center; } .icon { margin-right: 5px; /* 設置圖標和文本之間的距離 */ } ``` 其中，`.parent` 為外層容器元素，`display: flex` 和 `align-items: center` 實現了垂直居中對齊。`.icon` 則是設置圖標元素和文本之間的距離。 以上就是幾種常見的 CSS 圖標對齊方式，可以根據需求使用上述代碼段來實現。