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

【问题标题】：Need help horizontally centering elements which are dynamically positioned with Javascript需要帮助水平居中使用 Javascript 动态定位的元素
【发布时间】：2020-12-04 17:47:22
【问题描述】：

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

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

这一定与<img> 标记在<div id="gallery-content-center"> 中的定位方式有关，这对我来说很复杂，因为<img> 标记通过允许它们跳转列的变换属性动态改变定位当它们被切断时。

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

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

任何帮助将不胜感激！

【问题讨论】：

您是否尝试使用边距：0 自动；在你的画廊？
是的，我做到了。问题是图像右侧的空白被认为是#gallery-content div的一部分，因此从技术上讲，该div是居中的。我需要一些方法让它在居中时只看到图像。
由于您为您的项目使用固定宽度，如果您使用媒体查询计算并为您的容器提供固定宽度，那应该可以工作。例如，假设您有 2 个项目，每个项目的宽度为 50 像素，间距为 15 像素，则容器应为 115 像素宽。也不要忘记自动边距。

标签： javascript css responsive-design css-transforms jquery-isotope

【解决方案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;
    }
}

【讨论】：

这完美解决了它。非常感谢你这几天一直陪伴着我。