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>

Answer 2

您可以在display:flex上使用.team。在移动设备上（默认设置），您使用flex-direction : column，以使图像在垂直方向上彼此垂直。

在媒体查询（要更改它们的位置）中，使用flex-direction: row。这样，图像（divs）将排成一行并从那里样式化。

检查下面的jsfiddle或代码段。让我知道这是否对您有帮助。

.team {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 1000px) {
  .team img {
    width: 100%;
    height: auto;
    display: block;
    padding-top: 20px;
  }
  .team {
    text-align: center;
    flex-direction: row;
  }
  .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;
  }
}

<section class="team">
  <div>
    <img src="https://via.placeholder.com/150">
    <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="https://via.placeholder.com/150">
    <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="https://via.placeholder.com/150">
    <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>

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

2 个答案: