在網頁設計中，經常需要使用圖標和文字來達到更好的視覺效果。如何讓圖標和文字居中對齊呢？使用CSS可以輕松實現。 首先，我們要選擇一個好看的圖標，可以在Iconfont等網站上尋找。對于文字，推薦使用字體庫，比如Google Fonts，而不是直接使用普通的字體，可以讓網頁更加美觀。 接下來，使用CSS中的 display:flex 屬性，我們可以將圖標和文字放在同一個容器中，并設置 justify-content 和 align-items 的值為 center，這樣圖片和文字就可以居中對齊了。示例代碼如下：

.container {
display: flex;
justify-content: center;
align-items: center;
}
.icon {
font-size: 30px;
margin-right: 10px;
}
.text {
font-size: 18px;
}

在 HTML 中，我們可以將圖標和文字放置在同一個 div 中，并給它設置一個類名為 .container，如下所示：

下面是一個好看的圖標和文字的組合：
這里是文字

上述代碼中，假設我們選取的圖標的類名為 .icon，而文字的類名為 .text。在設置 .icon 的樣式時，我們將其字體大小設置為 30px，間距設置為 10px；而文字的字體大小為 18px。這些樣式都可以根據實際需求進行調整。 最后，我們得到了一組好看的圖標和文字的組合，且它們居中對齊，如下圖所示：

總之，使用CSS的display:flex屬性可以輕松實現圖標和文字的居中對齊。在實際項目中，可以根據需要進行更加復雜的排版，從而實現更加豐富的視覺效果。