React-Icons：图标与文本不对齐

问题描述

我在我的一个项目中使用了 react-icons，但我无法将图标（垂直）与文本对齐。以下是我目前得到的。

如你所见——图标比文字高一点。

以下是我的 HTML 代码：

<div className="route-info-container">
                    <div>
                        <p>Difficulty (1-10)</p>
                        <h2><aifillFire />{route.difficulty}</h2>
                    </div>
                    <div>
                        <p>Length</p>
                        <h2><GiTrail />{route.length}</h2>
                    </div>
                    <div>
                        <p>Est Driving Time</p>
                        <h2><RiTimerFlashFill />{route.estimatedDrivingTime}</h2>
                    </div>
                    <div>
                        <p>Permits</p>
                        <h2><IoNewspaperSharp />{route.permits? 'required': 'Not required'}</h2>
                    </div>
</div>

以下是我的css：

.route-info-container {
      display: grid;
      grid-template-columns: auto auto;
  }
  
  .route-info-container h2 {
    font-size: 25px;
    margin-top: 10px;
  }

解决方法

这是因为 svg 的对齐方式。您不能对 svg 做太多事情，但可以尝试对 h2 执行此操作：

h2 {
   display: flex;
   align-items: center;
}