如何使锚和 img 居中以做出响应

Question

 <div class="testt">
        <div class="test">
            <img src="4.jpg">
            <a href="">test</a>
        </div>
        <div class="test">
            <img src="5.jpg">
            <a href="">test</a>
        </div>
        <div class="test">
            <img src="7.jpg">
            <a href="">test</a>
        </div>
        <div class="test">
            <img src="6.jpg">
            <a href="">test</a>
        </div>

如果你能帮我把图片变成一条线，并且它们下面的锚很好地居中，并且对所有设备都能做出响应

Answer 1

您可以在父级上使用display: flex;，这会将所有内容放在一行上，给它一个相对的width，以便它随着视口缩放，将text-align: center;分配给.test div以使内容居中, 并给 img 一个 max-width: 100% 以便它与父大小一起缩放。

.testt {
  display: flex;
  width: 90%;
  margin: auto;
}
.test {
  text-align: center;
}
.test img {
  max-width: 100%;
  display: block;
}

<div class="testt">
  <div class="test">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
    <a href="">test</a>
  </div>
  <div class="test">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
    <a href="">test</a>
  </div>
  <div class="test">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
    <a href="">test</a>
  </div>
</div>