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

Question

我在我的一个项目中使用 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;
  }

Answer 1

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

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