如何让图像小部件在我的 WordPress 网站的页脚中居中？答案

【问题标题】：How can I get an image widget to center in the footer of my WordPress site?如何让图像小部件在我的 WordPress 网站的页脚中居中？
【发布时间】：2018-06-26 19:54:23
【问题描述】：

我正在使用 Kale Wordpress 主题，在页脚中，我为我的徽标使用了一个图像小部件。我正在尝试使用自定义下的附加 CSS 面板使该图像居中。我相信我的居中代码是正确的，我只是无法识别正确的选择器或类来让 CSS 知道我想要居中的内容。

我尝试在 Chrome 中使用 Inspect Element 来查找它所说的是图像的类名，但无济于事。

.image wp-image-14  attachment-medium size-medium .footer-row-3-widget widget widget_media_image {
  display: block;
margin: 0 auto;  }

如果对我的网站有帮助，我的网站是 revoltmedia.org，我正在尝试将徽标放在底部的中心。我再次认为我用于居中图像的代码很好，我只是无法弄清楚图像的类/选择器的名称是什么，所以我可以实际调用它，并将图像居中。

提前致谢！

【问题讨论】：

页脚似乎有一个 id 用于此小部件 (#media_image-3)，因此您可以选择使用 text-align: center;
如果你只想专门定位这张图片，你可以使用更具体的选择器，比如#media_image-3 > img.image，然后你可以使用你拥有的属性（即display:block; margin: 0 auto;）
@ochi 谢谢！使用#media_image-3 有效！对于未来，您如何能够找出图像的 id 是什么？
在使用我看到的检查元素时没关系，div id 然后是 media_image-3。非常感谢您的帮助！
是的，我使用检查器让我更仔细地查看与图像相关（和周围）的元素 - 然后我添加了一个答案。为了将来参考，最好在您的问题中添加minimal reproducible example

标签： html css wordpress image centering

【解决方案1】：

使用 Chrome 的开发工具 (inspect) 查看 HTML 我可以看到 footer 似乎有一个用于此小部件 (#media_image-3) 的 id，因此这可能是您使用 text-align: center; 的选择器

现在，如果您只想专门针对此图像（而不是其他图像），您可以使用更具体的选择器，例如 #media_image-3 > img.image，然后您可以使用已有的属性，例如

#media_image-3 > img.image {
    display: block; 
    margin: 0 auto;
}

【讨论】：

【解决方案2】：

试试这个：

.footer-row-3-widget widget widget_media_image {
  text-align: center;
}

【讨论】：

谢谢，但有效的是使用 id #media_image-3。
@LiamRamsey 请确保您回来并选择一个可以帮助您解决问题的答案