Vertical-align doesn't work for React Icons in React.js

Question

This topic has been raised many times in this forum and also often causes problems. This time me.I put react icons in my react application project. I'm having trouble positioning icons in the same line with text. It's about the "approved" icons shown in the image below. How can I refine my code so that the icons are in line with the text?

I tried the following solutions for the above situation:

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

then

display: block;
vertical-align: middle;
float: left;

MY CODE:

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>

CSS

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

Blaze_droid · Accepted Answer · 2021-04-08 02:08:38Z

1

First of all display: flexbox is not a thing in css.

You have to set display: flex and that would work. And also if you have to align it vertically center use align-items: center instead of align-content: center Like this:

ul {
  display: flex
  align-items: center
}

answered Apr 8, 2021 at 2:08

Blaze_droid

4795 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sebastian Falba Over a year ago

The CSS bug only appeared here. In the code it looked like display: flex. Despite your hint it didn't work. But I managed to match the icons to the text by choosing the right size of them. Now they are in the same line.

Collectives™ on Stack Overflow

Vertical-align doesn't work for React Icons in React.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related