在CSS中，將圖標(biāo)和文字放在同一行是一個常見的需求，要實現(xiàn)這一目標(biāo)，你可以使用CSS的display屬性或者vertical-align屬性。
使用display屬性
一種方法是使用display: flex或者display: inline-flex，這樣，圖標(biāo)和文字就可以作為flex容器中的項目，自動排列在一行中。
<div style="display: flex; align-items: center;"> <img src="icon.png" alt="圖標(biāo)"> <span>文字</span> </div>
使用vertical-align屬性
另一種方法是使用vertical-align: middle或者vertical-align: top，這取決于你希望圖標(biāo)和文字如何對齊，這種方法適用于img元素和span或div元素。
<img src="icon.png" alt="圖標(biāo)" style="vertical-align: middle;"> <span style="vertical-align: middle;">文字</span>
示例代碼
下面是一個完整的示例，展示如何將圖標(biāo)和文字放在同一行：
<!DOCTYPE html>
<html>
<head>
<style>
.icon-text-row {
display: flex;
align-items: center;
}
.icon-text-row img {
vertical-align: middle;
}
.icon-text-row span {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="icon-text-row">
<img src="icon.png" alt="圖標(biāo)">
<span>文字</span>
</div>
</body>
</html>在這個示例中，我們創(chuàng)建了一個名為.icon-text-row的CSS類，用于將圖標(biāo)和文字排列在一行中。img和span元素都設(shè)置為vertical-align: middle以確保它們與彼此以及容器中的其他元素垂直對齊，這種方法可以確保在各種情況下，圖標(biāo)和文字都能很好地配合在一起。
版權(quán)聲明：除非特別標(biāo)注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時請以鏈接形式注明文章出處。
