需要帮助水平居中使用 Javascript 动态定位的元素

Question

这是我正在处理的网站：https://frankli-n.github.io/portfolio/memsmosaics/filter/filterable-gallery/dist/m_index.html#gallery

图像部分是响应式的 - 当您缩小 window 时，您获得的图像列会更少。问题是这些列不居中。我希望它们始终在 window 内水平居中。这对于移动端的美观尤为重要。

这一定与 <img> 标签在 <div id="gallery-content-center"> 中的定位方式有关，这对我来说很复杂，因为 <img> 标签的定位随着transform 属性允许它们在被切断时跳转列。

style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 258px, 0px);

这是 window 的屏幕截图，其中图像明显未居中并且 img 标签（对于右上角的红色图片）变换定位在检查中突出显示。

如有任何帮助，我们将不胜感激！

Answer 1

根据您的情况，您应该如何做：

#gallery-content-center {
    margin: 0 auto;
    width: 1240px;
    float: none;
}

@media screen and (max-width: 1250px) {
    #gallery-content-center {
        width: 930px;
    }
}

@media screen and (max-width: 960px) {
    #gallery-content-center {
        width: 620px;
    }
}

@media screen and (max-width: 670px) {
    #gallery-content-center {
        width: 310px;
    }
}

需要帮助水平居中使用 Javascript 动态定位的元素

Need help horizontally centering elements which are dynamically positioned with Javascript

javascript

css

responsive-design

css-transforms

jquery-isotope