CSS - 在 Wordpress 中并排的图像答案

【问题标题】：CSS - Images side by side in WordpressCSS - 在 Wordpress 中并排的图像
【发布时间】：2026-02-17 04:05:01
【问题描述】：

我尝试使用http://jsfiddle.net/heera/X3b5g/1/ 提供的代码，当我在小提琴中输入我自己的变量名称/图像时，它工作正常。

然后我将 CSS 代码放入我的子主题 style.css 和我的页面中的 HTML 中，并且图像显示一个在另一个之上，而不是按照我的需要并排显示。我没有使用可能会发生冲突的变量，而且我正在为此发疯——这是 Wordpress 中的一些东西，它阻止了它的工作。

.my-side-by-side {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
}

#my-button-centred {
    text-align:center;
}

HTML：

<div id="my-button-centred">
  <a href=""https://itunes.apple.com/us/app/belize-travel-guide-paid/id792977226?mt=8">
  <img class="my-side-by-side" border="0" alt="" src="http://hotguidebelize.com/wp-content/uploads/apple-store.png" alt="" /></a>
  <a href="https://play.google.com/store/apps/details?id=com.app_belizeguide.layout">
  <img class="my-side-by-side" border="0" alt="" src="http://hotguidebelize.com/wp-content/uploads/google-store.png"/></a>
</div>

如果我取出 div id 并只使用 div 类，我会并排获得按钮，但它们不会居中。我做错了什么？

【问题讨论】：

在您的 WP 主题中是否有任何样式可能会覆盖它？如果你用检查器检查元素，它会说什么？计算的样式与您上面提供的示例相同吗？
我用萤火虫检查了所有的样式，什么也没有！我通过在左侧放置第三个透明按钮来“捏造”它，迫使我想要的两个更远。当然不理想，但我不能在两个按钮上浪费一天！该页面是hotguidebelize.com/belize-at-your-fingertips，如果有人想查看并且可以看到我没有看到的明显内容 - thx。

标签： html css wordpress image alignment

【解决方案1】：

您的代码在小提琴中完美运行：right here

您能否在测试时检查源代码，并确保没有其他样式覆盖它？如果是这样，请尝试在覆盖样式的末尾添加 !important

【讨论】：

【解决方案2】：

当您使用子主题时，您必须注意父主题中的任何 CSS。您可能需要覆盖父主题中的某些内容。

一些例子可能是

边距
填充
位置
显示

您必须检查元素以查看每个未在您的子主题中设置的 CSS 值，并找出导致其显示不正确的 CSS 值。

【讨论】：

这是 IMO 使用子主题的最大失败。