html - 容器查询

Question

我想做到这一点，所以我有一个容器，我可以在其中放置三个 div，每个 div 将包含一个图像、一个标题和一个小段落，我希望它们居中对齐，所以第二个是正确的在中心，我将如何去做呢？

Answer 1

这是实现它的一种非常简单的方法:

我使用了三个 section div，每个都居中声明了一个宽度和 margin: 0 auto 规则。

body{
  margin:0;
  padding:0;
  width:100%;
  height:100vh;
}

section{
  width:50%;
  margin:0 auto;
}

h2.title{
  text-align:center;
}

<section>
  <h2 class="title">Section1</h2>
  <img src="http://lorempixel.com/300/300/animals" alt="">
</section>
<section>
  <h2 class="title">Section2</h2>
  <img src="http://lorempixel.com/300/300/animals" alt="">
</section>
<section>
  <h2 class="title">Section3</h2>
  <img src="http://lorempixel.com/300/300/animals" alt="">
</section>