如何使锚和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;分配给{{ 1}} divs将内容置于中心位置，并为.test img提供一个max-width: 100%，以便它与父级尺寸一致。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;