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

时间:2019-01-15 16:52:54

标签: css wordpress

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

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

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

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

2 个答案:

答案 0 :(得分:0)

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

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

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

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

答案 1 :(得分:0)

!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;
}