如何居中锚点和 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>

如何居中锚点和 img 以响应

How to to center anchor and img to be responsive

css

anchor

image

centering