Попытка совместить 3 изображения и 3 текста в одной строке с flexbox

Question

Я пытаюсь выровнять элементы 3 li, но я не уверен, что делаю неправильно. Я пробовал разные варианты flexbox, но ничто не заставляет строки текста двигаться вверх, я пытался поместить их в теги

, но это только увеличивает разрыв.

Я также хотел бы знать можно ли 'pu sh' раздел скидки, не добавляя такой большой запас, как я сделал? Я чувствую, что запас не нужен?

Любая помощь очень ценится.

 <!-- DISCOUNT SECTION -->
        <section class="section3">
          <div class="section3wrap">
            <div class="section3text"> 
                <h2>Pay now and get</br> a 25% <span class="yellow-text">Discount</span></h2>
                <div class="test">
                    <ul>
                        <li><img src="img/check-icon.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<li>
                        <li><img src="img/check-icon.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                        <li><img src="img/check-icon.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                    </ul>
                </div>
                <a class="site-btn2">Join the Gym</a>
            </div>
        </div>
        </section>

.section3 {
background-image: url("img/add-bg.jpg");
height: 600px;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}

.section3wrap {
    display: flex;
    justify-content: flex-end;
    margin-right: 250px;
}

.section3text {
    color: white;
}

.section3text li {
    list-style-type: none;
}

.test {
    display: flex;
    justify-content: ;

}

Answer 1

Сделайте ваш li элемент display: flex; align-items: center; и окружите изображения div. Встроенные элементы, такие как изображения, иногда могут немного отличаться при выравнивании по тексту.

Answer 2

Я надеюсь, что это то, что вы ожидаете:

.section3 {
  background-image: url("https://dummyimage.com/100x100/000/fff");
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.section3wrap {
  display: flex;
  height: inherit;
}

.section3text {
  color: white;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

}

.test ul {
  padding: 0;
}

.section3text li {
  list-style-type: none;
  padding:4px;
  line-height:15px;
  align-items:center;
  display:flex;
}
.section3text img {
  padding:4px;
}

.test {
  display: flex;

}
.site-btn2{
background-color:yellow;
width:100px;
display:flex;
justify-content:center;
line-height:40px;
color:black;
border-radius:3px;

}

<section class="section3">
    <div class="section3wrap">
    
  <div class="section3text">

</div>
      <div class="section3text">
        <h2>Pay now and get<br> a 25% <span class="yellow-text">Discount</span></h2>
        <div class="test">
          <ul>
            <li><img src="https://dummyimage.com/12x12/fff/fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </li>
            <li><img src="https://dummyimage.com/12x12/fff/fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li><img src="https://dummyimage.com/12x12/fff/fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
          </ul>
        </div>
        <a class="site-btn2">Join the Gym</a>
      </div>

    </div>
  </section>

Answer 3

Добавить дополнительно css

.test ul {
  margin:0px;
  padding:0px
}

.section3text li {
    list-style-type: none;
    display: flex;
}
.section3text li img{
margin-right:8px;
}