html - 如何水平对齐以前垂直对齐的照片？

Question

我正在“转换”一个响应式网站，需要帮助水平对齐 3 张以前在移动设备上垂直对齐的图片。我已阅读一些 StackOverflow 帖子，但找不到适合我的解决方案。

查看 JSFiddle:https://jsfiddle.net/8dkgcyfq/1/

<section class="team">
  <div>
  <img src="img/lady.jpg">
  <h2>Navn Navnesen</h2>
  <h1>contact@gmail.com</h1>
  <i class="fab fa-facebook"></i>
  <i class="fab fa-instagram"></i>
  <i class="fab fa-linkedin"></i>
  </div>

  <div>
  <img src="img/lady.jpg">
  <h2>Navn Navnesen</h2>
  <h1>contact@gmail.com</h1>
  <i class="fab fa-facebook"></i>
  <i class="fab fa-instagram"></i>
  <i class="fab fa-linkedin"></i>
  </div>

  <div>
  <img src="img/lady.jpg">
  <h2>Navn Navnesen</h2>
  <h1>contact@gmail.com</h1>
  <i class="fab fa-facebook"></i>
  <i class="fab fa-instagram"></i>
  <i class="fab fa-linkedin"></i>
  </div>
</section>

@media only screen and (min-width: 1000px) {
  .team img {
    width: 25%;
    height: auto;
    display: block;
    padding-top: 20px;
  }

  .team {
    text-align: center;
  }

  .team h2 {
    font-family: "Catamaran";
    font-size: 20px;
    color: white;
    font-weight: 300;
    text-align: center;
    padding-top: 20px;
  }

  .team h1 {
    font-family: "Catamaran";
    font-size: 15px;
    color: white;
    font-weight: 300;
    text-align: center;
    padding-top: 5px;
  }

  .team i {
    font-size: 25px;
    color: white;
    padding-top: 10px;
  }
}

需要一些帮助来水平对齐这些照片。

Answer 1

根据我的意见，我会使用 flexbox 和移动设备优先的方法，这意味着您只需要更改媒体查询中的宽度:

/* put all default styleing outside media query */

.team {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

/* I always do mobile first then media query tablet and above */

.team > div {
  /* personally, I would give these divs a class instead of having to do a bare selector (the slowest of all element selectors) */
  width:100%;
}
@media only screen and (min-width: 1000px) {
  .team > div {
    width: 25%;
  }
}

<section class="team">
  <div>
    <img src="img/lady.jpg">
    <h2>Navn Navnesen</h2>
    <h1>contact@gmail.com</h1>
    <i class="fab fa-facebook"></i>
    <i class="fab fa-instagram"></i>
    <i class="fab fa-linkedin"></i>
  </div>

  <div>
    <img src="img/lady.jpg">
    <h2>Navn Navnesen</h2>
    <h1>contact@gmail.com</h1>
    <i class="fab fa-facebook"></i>
    <i class="fab fa-instagram"></i>
    <i class="fab fa-linkedin"></i>
  </div>

  <div>
    <img src="img/lady.jpg">
    <h2>Navn Navnesen</h2>
    <h1>contact@gmail.com</h1>
    <i class="fab fa-facebook"></i>
    <i class="fab fa-instagram"></i>
    <i class="fab fa-linkedin"></i>
  </div>
</section>