CSS圖標和字的垂直居中是一個常見的需求，當我們在設計頁面的時候，經常需要讓圖標和字在同一行且垂直居中，以呈現更好的視覺效果。本文將介紹如何使用CSS實現這一目標。
首先，讓我們看一下HTML代碼：
<div class="wrapper"> <i class="icon"></i> <p class="title">這里是標題</p> </div>上述代碼是一個包裹著圖標和字的DIV容器，其中圖標使用了標簽，標題使用了
標簽。我們將使用CSS來實現這兩個元素的垂直居中。 一、圖標的垂直居中 要讓一個圖標垂直居中，我們可以使用CSS中的vertical-align屬性。將圖標的display屬性設置為inline-block，然后將vertical-align屬性設置為middle，即可實現垂直居中。 下面是相應的CSS代碼：
.icon {
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
background-color: black;
color: white;
}上述代碼中，我們通過設置display: inline-block將圖標轉換為行內塊元素，并通過設置width和height屬性來定義圖標的大小。然后設置vertical-align為middle，即可實現垂直居中。我們也可以通過background-color和color屬性來設置圖標的顏色和背景顏色。
二、文本的垂直居中
要讓文本垂直居中，我們可以使用CSS中的line-height屬性。將文本的line-height屬性設置為和包裹它的容器高度相等，即可實現將文本垂直居中。
下面是相應的CSS代碼：.title {
display: inline-block;
font-size: 20px;
line-height: 30px;
}上述代碼中，我們通過設置display: inline-block將文本轉換為行內塊元素，然后設置font-size屬性來定義文本的字體大小。最后，設置line-height屬性為30px，即可實現將文本垂直居中。
最后，我們可以調整兩個元素之間的間距，以達到更好的視覺效果。
下面是最終的CSS代碼：.wrapper {
height: 30px;
}
.icon {
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
background-color: black;
color: white;
margin-right: 10px;
}
.title {
display: inline-block;
font-size: 20px;
line-height: 30px;
}通過以上的代碼，我們可以將圖標和文本實現垂直居中，并調整它們之間的間距。希望這篇文章對你有幫助！上一篇css圖文字對齊
下一篇css圖文環繞怎么搞