prestashop css 垂直和水平居中

Question

您好，我需要帮助将我的 prestashop 网页上的几张图片居中。

我需要页面底部的 3 个圆圈（不是社交图标）方面的帮助。我不知道如何将图像居中放置在圆圈中。

请帮忙

Answer 1

您可以在容器内对这些图像进行绝对定位，然后像这样从那里开始工作：

• 位置：.certifikat class 的相对位置，因此任何绝对定位的子项都将绑定到它们的容器
• position: <img> 在 .certifikat class
中的绝对位置

总结一下，对于 .certifikat class 使用：

.certifikat{
    position: relative;
    overflow: hidden;
    /*rest of your code*/
}

如果您知道这些 <img> 标签的宽度和高度，您可以将它们居中：

.certifikat img{
    position: absolute;
    top: 50%; left: 50%;
    margin-left: -(halftheirwidth);
    margin-top: -(halftheirheight);
}

OR 如果您不知道它们的确切宽度和高度，您可以使用 translate 方法：

.certifikat img{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

希望这能为您指明正确的方向