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;
}