在web開發中，我們常常需要使用圖標來美化頁面布局，而在把圖標放到一行文字中時，我們往往會遇到一個難題——如何讓圖標位置上下居中？ 其實，解決這個問題的方法非常簡單，我們只需要使用CSS中的vertical-align屬性即可。 vertical-align屬性可以控制元素在垂直方向上的對齊方式，其取值有以下幾種： - baseline：讓元素基線對齊 - top：讓元素頂部對齊 - middle：讓元素中間對齊 - bottom：讓元素底部對齊 因此，我們可以通過設置vertical-align: middle;來讓圖標與文字上下居中對齊，如下所示：

.icon {
display: inline-block;
vertical-align: middle;
}
.text {
display: inline-block;
vertical-align: middle;
}

在上面的代碼中，我們將圖標和文字都設置為行內塊級元素，并且在它們的樣式中都加入了vertical-align: middle;的屬性，這樣就可以實現圖標和文字的上下居中對齊了。 需要注意的是，vertical-align只有在元素為行內塊級元素時才有效，因此我們需要將圖標和文字都設置為行內塊級元素，或者使用display: inline-block;來實現。 總結一下，通過設置CSS中的vertical-align屬性，我們可以輕松地讓圖標與文字上下居中對齊，從而使頁面布局更加美觀。