我需要在画廊中居中图像，没有任何效果

Posted 2023-03-29

【中文标题】我需要在画廊中居中图像，没有任何效果

【英文标题】：I need to center images inside a gallery, nothing works

【发布时间】：2018-05-25 03:55:03

【问题描述】：

我购买了一个名为Photographer的wordpress主题，并尝试在图库中显示居中的图像。

我在他们的支持论坛上问过，他们给了我这个代码

.gallery-item   text-align: center; width: 100%; 

但这会将肖像图像拉伸到风景图像的宽度，从而使它们变得非常长。 我尝试了我设法找到的每一个解决方案，似乎不可能做到。 我提到，即使在 Wordpress 页面编辑器中，我也将图像居中对齐。

此处的示例页面：http://vladilas.ro/test/portfolio/mihaela-si-paul-gura-humorului-rarau-2015/

如果有人知道如何解决这个问题，我们将不胜感激。

谢谢！

【问题讨论】：

你希望图片怎么样，那个网站上有好几张图片

这些图像包含在位于absolute 的figure 元素中。通过将left 和right 属性声明为0，同时将margin 属性声明为auto（与任何block 元素一样），您可以将绝对定位的元素水平居中。最后，这意味着您需要为选择器.gallery-item声明以下规则right: 0; max-width: max-content; margin: auto;

已经很好看了，如果你调整宽度你会破坏它

我认为这个链接可能会对你有所帮助，***.com/questions/28325033/…

【参考方案1】：

试试这个：

.gallery-item margin: 0 auto;

【参考方案2】：

这应该会停止拉伸和定位中心：

.gallery-item margin: 0 auto; position:relative; float:none; max-width:100%;

【参考方案3】：

添加以下css。

figure 
 display: inline-block;
 text-align: initial;
 vertical-align: top;
 position: relative;
 margin: 0.5em;
 font-size: 0.8em;
 background: white;
 overflow: hidden; 


figure.img     
 display: block;
 margin-left: auto;
 margin-right: auto;

然后删除.gallery-item float: left;

这应该可以解决问题。

【参考方案4】：

由于您的图库项目是绝对定位的，您可以将此规则添加到您的自定义 CSS 中以将它们水平居中：

.gallery-item 
  left: 50%;
  transform: translateX(-50%);

【参考方案5】：

很遗憾，没有一个解决方案奏效。这真是太疯狂了。

我在此处发布问题之前所做的一件事是手动将margin-left 指定为仅用于人像照片的固定像素值。但这不是理想的解决方案，因为我的一些旧照片的分辨率有点低，所以它们会出现在中间的某个位置。

我想我是靠运气解决了这个问题。 CSS代码是：

.gallery-icon.portrait

    margin-left: 20%;
    margin-right: 20%;

我知道这可能不是最好的解决方案，但现在它似乎有效:) 非常感谢您的帮助，也许可以告诉我您对我的 CSS 的看法 :))