在網頁設計中，圖標和文字的居中排版是非常重要的。CSS作為一種前端框架語言，可以幫助您輕松實現這個效果。本文將介紹CSS實現圖標和文字居中的基本方法。
首先讓我們來看看如何實現CSS圖標的居中。通過在HTML中嵌入一個圖標，例如在按鈕中，“i” 標簽最常用于添加圖標。
<button> <i class="fa fa-home"></i> </button>
在上面的代碼中，我們使用了 FontAwesome 字體圖標。 內聯的 “i” 標簽使“fa-home”圖標顯示在按鈕內。 接下來，在CSS中，我們創建一個類，可以將該類應用于“i”標記并將其居中。
. icon{
display: flex;
justify-content: center;
align-items: center;
}在上面的代碼中，我們使用了 Flexbox 模型，通過使用“justify-content”和“align-items”屬性，可以將圖標水平和垂直居中。
下面讓我們來看一下如何使用CSS在網頁設計中實現文字的居中。 通過將文字包裹在HTML中的
標簽中，可以輕松將文本居中。
<div class="center-text"> <p>這是一個居中的文字！</p> </div>
在上面的代碼中，我們將文字包裝在一個名為“ center-text”的div標簽中。 接下來，在CSS中，我們可以為“ center-text”類創建一個樣式，使其可以水平和垂直居中。
. center-text{
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* 設置高度 */
}
. center-text p{ /* 為 p 標簽創建一個樣式 */
text-align: center; /* set text to center */
}在上面的代碼中，我們使用了Flexbox模型，還設置了“ height”屬性。為了確保文本垂直居中，我們必須使用Flexbox模型，同時為“ p”標簽應用樣式屬性“ text-align: center”來將文本水平居中。
在網頁設計中，圖標和文本的居中排版使您的網站看起來更有條理和專業，同時也增加了用戶對網站的吸引力和流量。上述所述的方法簡單快捷，在開發中可以大量使用。
上一篇css圖標小
下一篇css圖標文字上對齊