使用WordPress货币切换插件时如何修改CSS对齐错位文本？

问题现象 #

• 搭建定价页过程中，启用货币切换插件后出现文本对齐异常：$250 价格文本位置偏上，需要下移调整，和同区域其他文本保持同一行基线对齐。
• 错位效果参考：
  

修复步骤 #

1. 定位错位元素：打开对应页面按F12唤起浏览器开发者工具，用左上角的元素选择工具点击错位的$250文本，在右侧样式面板查看当前生效的CSS属性，确认元素的实际类名。
2. 优先清理冲突属性：货币切换插件大概率给切换后的价格加了独立的行高、垂直对齐规则，或者做了相对定位上偏移，和主题原有定价样式产生了冲突。把下面的代码复制到WordPress后台「外观-自定义-额外CSS」输入框中，注意把选择器替换成你查到的实际元素类名：

/* 替换成错位价格元素的实际类名，例如.woocommerce-Price-amount */
.your-price-element-class {
    /* 清除定位偏移 */
    position: static !important;
    top: auto !important;
    /* 继承父容器行高，避免单独行高导致错位 */
    line-height: inherit !important;
    /* 对齐基线 */
    vertical-align: baseline !important;
}

3. 微调位置：如果做完上面的步骤，文本还差几像素没对齐，就把上面代码里的定位部分改成相对定位，微调下移距离：

.your-price-element-class {
    position: relative;
    top: 2px; /* 数值越大下移距离越大，根据实际视觉效果调整到对齐即可 */
    line-height: inherit !important;
    vertical-align: middle !important;
}

注意事项 #

• 别直接修改插件自带的CSS文件，不然下次插件更新版本，你改的内容会被直接覆盖，所有自定义样式统一放到主题自带的「额外CSS」栏或者子主题样式表里最稳妥
• 保存CSS后记得清空站点缓存、浏览器缓存再刷新页面看效果，很多时候改完没生效都是缓存导致的
• 如果插件把价格拆成了货币符号、数值两个独立的span标签，要给两个标签同时加上对齐样式，别只改其中一个，不然还是对不齐

内容的提问来源于stack exchange，提问作者inputchip