Html 垂直对齐不'；React.js中的React图标不起作用

这个话题在这个论坛上被提出了很多次，也经常引起问题。这次是我。我在我的react应用程序项目中放置了react图标。我无法将图标与文本放在同一行。这是关于下图中显示的“已批准”图标。如何优化代码，使图标与文本一致

针对上述情况，我尝试了以下解决方案：

display: flexbox;
justify-content: center;
align-content: center;

然后

我的代码：

const templates= ['Instagram templates & styling $500 USD', 'Business/Loyalty Cards $100USD', 'Brand & Website Audit $300USD', 'Additional Web Pages $300', 'Service Menu/Flyer $200 USD', 'Packiging design from $600', 'Price of website + online shop setup - $ 700 USD (up to 15 products)', '+ SEO styler - $ 300 (implement basic SEO to any existing squarespace site)'];

const fourth = templates.map((templates, idx) => {
    return <li key={idx}><TiTickOutline color="#9E7F61" />{templates}</li>
});


<div className="results">
    <div className="service-list">
        <h2 className="results">The kind of result you can expect</h2>
           <ul className="values">
              <li className="positions">{fourth}</li>
           </ul>
     </div>
</div>

---

首先，

display:flexbox

不是css中的东西

您必须设置

display:flex

，这样就可以了。 如果必须将其垂直居中对齐，请使用

align items:center

，而不是像这样使用

align content:center

：

ul{
显示器：flex
对齐项目：居中
}

CSS错误只出现在这里。在代码中，它看起来像display:flex。尽管你暗示它不起作用。但我通过选择合适的图标大小，成功地将图标与文本匹配起来。现在他们在同一条线上。

const templates= ['Instagram templates & styling $500 USD', 'Business/Loyalty Cards $100USD', 'Brand & Website Audit $300USD', 'Additional Web Pages $300', 'Service Menu/Flyer $200 USD', 'Packiging design from $600', 'Price of website + online shop setup - $ 700 USD (up to 15 products)', '+ SEO styler - $ 300 (implement basic SEO to any existing squarespace site)'];

const fourth = templates.map((templates, idx) => {
    return <li key={idx}><TiTickOutline color="#9E7F61" />{templates}</li>
});


<div className="results">
    <div className="service-list">
        <h2 className="results">The kind of result you can expect</h2>
           <ul className="values">
              <li className="positions">{fourth}</li>
           </ul>
     </div>
</div>

.results {
  margin-top: 4em;
}

.results li {
  font-family: 'aperculight', sans-serif;
  font-size: 1.2vw;
  letter-spacing: 2px;
  margin-bottom: 1em;
  text-transform: uppercase;
}

.positions {
  font-family: 'blacker_displaylight';
  font-size: 50vw;
}

.values {
  list-style-type: none;
}