html - 根据区域设置设置单个样式表

Question

我有一些要进行绝对定位的翻译文本。我有英文的 NEW 和法文的 NOUVEAU。我希望这个词出现在图形下方的中心。由于单词的长度不同，我认为最好的方法(丑陋的)是进行绝对定位。我想将 left: 设置为 NEW 的一个值和 NOUVEAU 的另一个值，具体取决于语言环境是 en 还是 fr。

这是我认为的代码:

<p class="header-new1"><%= "#{t :new_landing}" %></p>

这是我当前的 CSS 代码，它将 NOUVEAU 放在我想要的位置:

.header-new1 {
    text-transform: uppercase;
    text-align: center;
    padding-top: 5px;
    color: @red;
    font-size: 143%;
    font-weight: bold;
    position: absolute;
    top: 450px;
    left: 652px;
}

我已经阅读了很多不同的解决方案，但没有一个适合我的情况。我希望找到一种方法，我不必为每个语言环境创建单独的 CSS 代码并在我的 View 中检查语言环境。如果有更简洁的方法来执行此操作，我将不胜感激。

Answer 1

好吧，让我直截了本地说:

你有一张图片(图形)，你想在它下面居中放置一个p？你为什么不给 p 与图像/图形相同的宽度，并将 text-align: center 添加到你的 css。这应该够了吧。还是我完全错了？