html - 我如何将带有图像的链接居中以响应响应式设计？

Question

我有一个在移动设备上看起来很奇怪的元素，它不是我需要的完全居中，所以我想知道是否有任何一种标准可以在任何分辨率下居中。

看:

<li> 
   <div class="asoc-director">                                     
        <a href="javascript:void(0)" class="client-director">
            <img class="card-picture-admins" src="assets/images/team/my-img.png">
            <span class="name-role" id="37">Sigfried Bermudez <br> Associate Director</span>
        </a>           
    </div>
</li>

css 是:

.asoc-director {
    padding-top: 46px;
    width: 100%;
    height: 140px;
}

li > div a:first-child {
    left: 35%;
    z-index: 2;
}

Answer 1

有。它叫做 flexbox，它是 display 的一个属性。在容器上使用 display:flex 结合 align-content:center 和 justify-content:center 使 child 居中。