CSS-在Wordpress中并排显示图像

Question

我尝试使用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类，则按钮并排放置，但是它们没有居中。 我究竟做错了什么？

Answer 1

您的代码在拨弄中工作得很完美： 就在这里

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

Answer 2

每当使用子主题时，都必须注意父主题中的所有CSS。 您可能必须重写父主题中的某些内容。

一些例子可能是

• 边距
• 填充
• 位置
• 显示

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