Center the image in the div tag

Question

I want my image to be in the middle of the height in the box. This my code (image)(The code is below the article)

I want(image)(width screen < 767px)

I want it to be the same on every screen (responsive) Thank you

.question-answer {
    background: #ffffff 0% 0% no-repeat padding-box;
    border-radius: 29px;
    border: 1px solid #C9C9C9;
    cursor: pointer;
    color: #303030;
}
.question-answer .question {
    display: flex;
    justify-content: space-between;
    padding-right: 30px;
}
.question-answer .question .content {
    padding: 0 34px;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    font-family: Open Sans;
    letter-spacing: 0px;
    color: #686868;
    opacity: 1;
    letter-spacing: 0px;
    position: relative;
    padding-right: 30px;
    min-height: 57px;
    display: flex;
    align-items: center;
}
.question-answer .question img {
    max-width: 24px;
    max-height: 24px;
    margin-top: 17px;
}
@media (max-width: 767px){
  .question-answer .question .content {
      padding-top: 15px;
      padding-bottom: 15px;
      padding-right: 0px;
  }
  .faq-page .question-answer .question img {
  }
}

<div class="question-answer">
  <div class="question">
  <div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</div>
  <img class="img-down" src="https://i.ibb.co/pRztJtW/arrow-circle-down-solid.png" alt="">
  </div>
</div>

Answer 1

Well, you can simply do it with flexbox. All you have to do is to assign the display: flex; to the parent element of your text and image, then with the flex properties like align-items: center; make them align vertically. You also have to remove the margin-top from the image element itself to make it perfectly centre.

So the final code should be something like this:

.question {
  display: flex;
  align-items: center;
}

.question-answer {
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 29px;
  border: 1px solid #C9C9C9;
  cursor: pointer;
  color: #303030;
}

.question-answer .question {
  display: flex;
  justify-content: space-between;
  padding-right: 30px;
}

.question-answer .question .content {
  padding: 0 34px;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  font-family: Open Sans;
  letter-spacing: 0px;
  color: #686868;
  opacity: 1;
  letter-spacing: 0px;
  position: relative;
  padding-right: 30px;
  min-height: 57px;
  display: flex;
  align-items: center;
}

.question-answer .question img {
  max-width: 24px;
  max-height: 24px;
}

@media (max-width: 767px) {
  .question-answer .question .content {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 0px;
  }
}

<div class="question-answer">
  <div class="question">
    <div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</div>
    <img class="img-down" src="https://i.ibb.co/pRztJtW/arrow-circle-down-solid.png" alt="">
  </div>
</div>

Answer 2

Please add this style. It will make your image vertically center.

.question {align-items: center;}
.question-answer .question img{margin: 0;}