I am working on positioning translated text on a webpage. The word NEW in English and NOUVEAU in French need to be centered below a graphic. Since the words have different lengths, I am considering using absolute positioning. The challenge is setting the left value based on the locale, either en or fr.
Below is the code in my view:
<p class="header-new1"><%= "#{t :new_landing}" %></p>
My current CSS code correctly positions 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;
}
I have explored various solutions, but none seem to address my specific requirements. I am hoping to find a cleaner method that does not involve creating separate CSS for each locale and instead dynamically adjusts based on the locale in the view. Any advice on achieving this would be greatly appreciated.