html - 有没有一种简单的方法可以为手机和平板电脑堆叠 div 并使它们居中？

Question

我有一个带有一些 div 的容器，可以水平显示 3 个框。

我试图让 div 在手机和平​​板电脑上垂直堆叠(居中)。我遇到的问题是我使用的媒体查询和样式似乎无法正常工作。

<div class="container-2">
  <div class="box">
    <div class="icon"><i class="fa fa-compact-disc" aria-hidden="true"></i>
    </div>
    <div class="content">
      <h3>Artists</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
    </div>
  </div>
  <div class="box">
    <div class="icon"><i class="fa fa-calendar-alt" aria-hidden="true"></i>
    </div>
    <div class="content">
      <h3>Calendar</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
    </div>
  </div>
  <div class="box">
    <div class="icon"><i class="fa fa-envelope" aria-hidden="true"></i>
    </div>
    <div class="content">
      <h3>Contact Us</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
    </div>
  </div>
</div>

.container-2 {
  position: relative;
  width: 1200px;
  height: 300px;
  margin: 100px auto;
}

.container-2 .box {
  position: relative;
  width: calc(400px - 30px);
  height: calc(350px - 30px);
  background: #0000005b;
  float: left;
  margin: 15px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px;
}

这 3 个 div(它们是盒子)在移动设备和平板电脑上会从水平方向变为垂直方向，并且它们本身居中。

关于对齐/移动 div 的最佳方法有什么建议吗？

Answer 1

display: flex在这里将成为你的 friend ——你在断点处更改 flex-direction 并调整 flex 设置:

.container {
  display: flex;
  justify-content: space-around;
  height: 100vh;
  width: 100vw;
}

.inner {
  height: 100px;
  width: 100px;
  background-color: red;
}

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: center;
  }

  .inner {
    background-color: blue;
  }
}

<div class="container">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>