0

絶対配置を行いたい翻訳テキストがあります。英語ではNEW、フランス語ではNOUVEAUという言葉があります。グラフィックの下の中央に単語を表示したい。単語の長さが異なるため、最善の方法 (醜い) は絶対配置を行うことだと思いました。left: を NEW の値に、ロケールが en か fr かに応じて NOUVEAU の別の値に設定したいと思います。

これが私の見解のコードです：

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

NOUVEAU を配置したい場所に配置する現在の CSS コードは次のとおりです。

.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 コードを作成し、ビューでロケールを確認する必要がない方法を見つけることです。これを行うためのよりクリーンな方法があれば、助けていただければ幸いです。

4

1 に答える 1

0

わかりました、これをまっすぐにさせてください：

画像 (グラフィック) があり、その下にp?を中央に配置します。p画像/グラフィックと同じ幅をtext-align: center指定して、css に追加してみませんか。これでうまくいくはずです。それとも私はこれを完全に間違っていますか？

于 2013-10-13T01:59:42.920 に答える