Font Awesome图标尺寸不一致时，如何对齐右侧文本？

问题描述 #

已将元素居中，但第一个图标尺寸偏小，导致右侧标题与文本无法和下方两个模块对齐，不想手动添加padding，担心影响后续响应式布局。

最优解决方案 #

核心思路是统一图标容器的占位宽度，让图标在固定宽度的容器内居中，避免因图标自身尺寸差异破坏布局对齐：

• 给.icon容器设置固定宽度（根据图标大小调整，比如70px），同时用flex布局让图标在容器内水平垂直居中，确保每个图标区域的占位完全一致
• 这种方式无需手动调整padding，且在后续添加媒体查询时，只需修改容器宽度即可适配不同屏幕，不会影响响应式逻辑

修改后的关键CSS代码 #

.icon {
  padding-right: 3%;
  width: 70px; /* 固定宽度，确保所有图标区域占位一致 */
  display: flex;
  justify-content: center; /* 图标水平居中 */
  align-items: center; /* 图标垂直居中 */
}

完整代码示例 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.0/css/all.css">
        <style>
            body {
                background-color: #eff1ed;
                font-family: "Roboto", sans-serif;
            }
            
            /* Header and nav bar */
            header {
                display: flex;
            }
            .logo-guitar {
                padding: 2% 1% 3% 2%;
            }
            .luthier-name {
                width: 100%;
                padding: 1.5% 0 0 1%;
            }
            #nav-bar {
                display: flex;
                text-align: center;
                justify-content: space-between;
                flex-direction: row;
            }
            .nav-link {
                width: 94px;
                text-align: center;
                margin: 2px auto;
                padding-top: 15%;
                color: #131b23;
                text-decoration: none;
                font-weight: bold;
            }
            h1 {
                font-family: "Satisfy", cursive;
                font-size: 3rem;
            }
            
            /* email form */
            
            .email-form {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
            }
            #email {
                height: 25px;
                width: 100%;
            }
            #submit {
                width: 80%;
                margin-top: 5%;
                background-color: #ffe121;
                border: 0;
                font-weight: bold;
                height: 35px;
                font-family: inherit;
                font-size: large;
            }
            
            /* Features */
            
            .fa-solid {
                color: #e3170a;
                font-size: 4rem;
            }
            
            .features {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: left;
            }
            .p-description {
                max-width: 90vh;
            }
            section {
                padding-top: 10%;
            }
            .icon {
                padding-right: 3%;
                width: 70px; /* 新增固定宽度 */
                display: flex;
                justify-content: center; /* 图标水平居中 */
                align-items: center; /* 图标垂直居中 */
            }
        </style>
    </head>
    <body>
        <section>
        <div class="features">
            <div class="icon"><i class="fa-solid fa-fire"></i></div>
            <div>
                <h2>Premium Materials</h2>
                <p class="p-description">
                    Our guitars are built with the best amazonian wood. This will
                    increase the longevity of your purchase.
                </p>
            </div>
        </div>
        <div class="features">
            <div class="icon">
                <i class="fa-solid fa-truck-fast"></i>
            </div>
            <div>
                <h2>Shipping</h2>
                <p class="p-description">
                    We make sure you recieve your trombone as soon as we have finished
                    making it. We also provide free returns if you are not satisfied.
                </p>
            </div>
        </div>
        <div class="features">
            <div class="icon"><i class="fa-solid fa-user-check"></i></div>
            <div>
                <h2>Satisfaction</h2>
                <p class="p-description">
                    For every purchase you make, we will ensure there are no damages or
                    faults and we will check and test the quality of your instrument.
                </p>
            </div>
        </div>
        </section>
    </body>
</html>

内容的提问来源于stack exchange，提问作者OMAR FORERO