垂直居中放置一个文本容器，不能与margin自动配合使用

Question

因此，我想在图像旁边居中放置一个文本块，我尝试使用margin auto 0px;，但是什么也没有。我也不明白为什么文本从容器的底部而不是顶部开始。

代码如下：

.feature {
  margin: 5px 0px;
}

.feature img {
  display: inline-block;
  width: 49%;
}

.feature .feature-detail {
  display: inline-block;
  width: 49%;
  margin: auto 0px;
}

<div class="feature">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Soylent.svg/800px-Soylent.svg.png">
  <div class="feature-detail">
    <h3>Feature Title</h3>
    <p>Feature Description</p>
  </div>
</div>

Answer 1

在图像CSS图像CSS中使用catchup=False。

以及 wait_for_task = ExternalTaskSensor( task_id='wait_for_task', external_dag_id='leader_dag', - external_task_id='t1', + external_task_id='print_date', dag=dag) 类中的vertical-align: middle;和display: flex;

align-items:center;

.feature

Answer 2

因为您已使.feature的所有直接子级都具有一个简单的display: inline-block;（在图像和vertical-align: middle;上都是.feature-detail）。

.feature {
  margin: 5px 0;
}

.feature > * {
  display: inline-block;
  width: 49%;
  vertical-align: middle;
}

<div class="feature">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Soylent.svg/800px-Soylent.svg.png">
  <div class="feature-detail">
    <h3>Feature Title</h3>
    <p>Feature Description</p>
  </div>
</div>

Answer 3

无需对display: inline-block;和vertical-align:middle;类检查使用margin:auto 0px; img和.feature-detail更新了CSS：

.feature {
  display: flex;
  align-items: center;
  margin: 5px 0px;
}

.feature img {
  width: 49%;
}

.feature .feature-detail {
  width: 49%;
}

<div class="feature">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Soylent.svg/800px-Soylent.svg.png">

  <div class="feature-detail">
    <h3>Feature Title</h3>
    <p>Feature Description</p>
  </div>

</div>

Answer 4

如果使用flexbox，则可以简化CSS。

* {
  box-sizing: border-box;
}

.feature {
  margin: 5px 0px;
  display: flex;
  align-items: center; /* Vertical alignment */
}

.feature img {
  width: 50%;
}

<div class="feature">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Soylent.svg/800px-Soylent.svg.png">
  <div class="feature-detail">
    <h3>Feature Title</h3>
    <p>Feature Description</p>
  </div>
</div>