CODEWITHSUNDEEP
htmlcssreactjs
Sebastian Falba
Sebastian Falba

Reputation: 73

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

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?

Screenshot

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

Upvotes: 1

Views: 779

Answers (1)

Blaze_droid
Blaze_droid

Reputation: 479

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
}

Upvotes: 1

Related Questions