Question

我希望我的图像位于框内高度的中间。这是我的代码（图片）（代码在文章下方）

我要（图像）（宽屏<767px）

我希望它在每个屏幕上都一样（响应）谢谢

.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

好吧，您只需使用flexbox即可。您要做的就是将display: flex;分配给文本和图像的父元素，然后使用align-items: center;这样的flex属性使它们垂直对齐。您还必须从图像元素本身中删除margin-top，以使其完全居中。

所以最终的代码应该是这样的：

.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

请添加此样式。它将使您的图像垂直居中。

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

将图像居中div标签

2 个答案: