如何在跨度标签内居中对齐锚标签？答案

【问题标题】：How to Center Align an Anchor Tag Within a Span Tag?如何在跨度标签内居中对齐锚标签？
【发布时间】：2019-06-09 17:38:46
【问题描述】：

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

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

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

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

【问题讨论】：

我会将您的相关标记添加到问题中以防止链接衰减
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/demo doesn't work can I just paste a link。

标签： css wordpress

【解决方案1】：

您可以使用这个 CSS 来使用 flexbox 将价格范围居中：

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

我更喜欢 flexbox，因为它比使用 text-align 更国际化。有人可能会说这只是吹毛求疵。

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

【讨论】：

【解决方案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;
}

【讨论】：