CSS 图标和文本对齐

比如下面一段HTML代码，我们想在图标旁边显示文本或者数字

<body>        <div><img src="smile.svg" alt="smile"><span>12</span></div>     <div><img src="heartShape.svg" alt="heart"><span>12</span></div></body>

在没有任何css的情况下，显示效果如下：

图标和数字的显示位置是错开的，会非常不好看。下面介绍三种对齐的方法

第一种方法，使用FlexBox

<html>  <head>        <title>My Website</title>    <style>.icon-text {display: flex;align-items: center; /* 垂直居中对齐 */}.icon {margin-right: 8px; /* 图标与文本之间的间距 */}</style></head>    <body>        <div class="icon-text"><img src="smile.svg" alt="smile" class="icon"><span>12</span></div>     <div class="icon-text"><img src="heartShape.svg" alt="heart" class="icon"><span>12</span></div></body>    
</html>

修改后，效果显示为图标和文本垂直居中对齐:

再进一步调整图标和文本的大小，就能实现完全的对齐

<html>  <head>        <title>My Website</title>    <style>.icon-text {display: flex;align-items: center; /* 垂直居中对齐 */}.icon {width: 22px; /* 图标宽度 */height: 22px; /* 图标高度 */margin-right: 8px; /* 图标与文本之间的间距 */}.text {font-size: 16px; /* 文本大小 */}</style></head>    <body>        <div class="icon-text"><img src="smile.svg" alt="smile" class="icon"><span class="text">12</span></div>     <div class="icon-text"><img src="heartShape.svg" alt="heart" class="icon"><span class="text">12</span></div></body>    
</html>

效果:

第二种方法，使用 Inline-Block

<html>  <head>        <title>My Website</title>    <style>.icon-text {display: inline-block; /* 使容器成为行内块元素 */vertical-align: middle; /* 垂直居中对齐 */}.icon {width: 22px; /* 图标宽度 */height: 22px; /* 图标高度 */vertical-align: middle; /* 确保图标和文本在同一水平线 */}.text {font-size: 16px; /* 文本大小 */}</style></head>    <body>        <div class="icon-text"><img src="smile.svg" alt="smile" class="icon"><span class="text">12</span></div>     <div class="icon-text"><img src="heartShape.svg" alt="heart" class="icon"><span class="text">12</span></div></body>    
</html>

效果:

第三种方法，使用Grid

<html>  <head>        <title>My Website</title>    <style>.icon-text {display: grid; /* 使用Grid布局 */grid-template-columns: auto 1fr; /* 第一列自动宽度，第二列填充剩余空间 */align-items: center; /* 垂直居中对齐 */margin-bottom: 10px; /* 每个图标文本对之间的间距 */}.icon {width: 22px; /* 图标宽度 */height: 22px; /* 图标高度 */}.text {font-size: 16px; /* 文本大小 */}</style></head>    <body>        <div class="icon-text"><img src="smile.svg" alt="smile" class="icon"><span class="text">12</span></div>     <div class="icon-text"><img src="heartShape.svg" alt="heart" class="icon"><span class="text">12</span></div></body>    
</html>

效果: