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 的对齐方式。你不能对 svg 做太多的事情，但试着对 h2 做这件事：

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