css - 如何居中 anchor 和 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>

如果你能帮我把图片排成一行并且它们下面的 anchor 很好地居中并且对所有设备都能响应

Answer 1

您可以在父级上使用 display: flex; ，这会将所有内容放在一行中，给它一个相对的 width 以便它随视口(viewport)缩放，分配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>