Question

在我的网站www.maastraders.shop上，我希望将所有产品的价格居中对齐。

我使用了inspect元素，发现有一个名为price的跨度类，因此我尝试在我的网站上的自定义CSS面板中引用该类，并尝试通过在末尾使用！important覆盖该类上的现有设置。我的命令（检查代码）。甚至尝试使用我从StackOverflow上的另一个线程找到的显示内联块。

span.price {   
    display:inline-block!important;
    text-align:center!important;
}

只希望整个价格（例如₹400）受到影响，但是只影响₹符号，而其后的金额保持不变。甚至尝试在此span类之外编辑div，但也会发生同样的事情。

Answer 1

您可以使用以下CSS通过flexbox将价格范围居中：

.product__price {
  display: flex;
  justify-content: center;
}

我更喜欢flexbox，因为它比使用text-align在国际上更友好。也许有人会说这只是挑剔。

您的问题提到将锚标记居中，但我在您的代码中找不到这些标记，因此希望这仍然是理想的结果！

Answer 2

!important规则只能作为不得已的方法，因为它不能被覆盖，相反，最好使用顺序和特殊性来覆盖样式。但是，这应该可行：

span.price
{
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
}
span.price a
{
    width: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
}

如何在Span标签内居中对齐锚标签？

2 个答案: