CSS 图标和文本对齐

news2024/10/9 7:43:07

比如下面一段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>

效果: