Выровнять второй текстовый элемент по концу первого текстового элемента - PullRequest
Новая
       30

Выровнять второй текстовый элемент по концу первого текстового элемента

0 голосов
/ 08 марта 2020

Я хочу показать предложение Engli sh и его перевод на язык RTL следующим образом:

enter image description here

Когда я пытаюсь добиться этого с помощью этого код: 

<section>

<h3>I <span style="color: #42affa;">would</span> like a cup of coffee, please.</h3>
			
<p style="text-align: right;" class='farsi'>«لطفا یک فنجان قهوه لطف کنید.»</p>

</section>

Я получаю такой результат:

enter image description here

Я думаю, мне нужно получить конец текстовый элемент Engli sh и начните перевод текста прямо здесь!

Будем благодарны за любые предложения ...

Примечание: Engli sh предложение выровнено по центру.

ОБНОВЛЕНИЕ: используя код ниже: 

<section style="display:flex; justify-content: center;">
  <div>
    <h3 style="text-align:right">
      I
      <span style="color: #42affa;">
        would
      </span>
      like a cup of coffee, please.
    </h3>
    <p style="direction:rtl" class="farsi">
      «لطفا یک فنجان قهوه لطف کنید.»
    </p>
  </div>
</section>

Я получаю это:

enter image description here

Ответы [ 2 ]

2 голосов
/ 08 марта 2020

Попробуйте приведенный ниже код, который будет работать правильно.

HTML

<p>
   I would like a cup of coffee, please.
   <br>
   <span lang="fa">«لطفا یک فنجان قهوه لطف کنید.»</span>
</p>

CSS

p {
    display: inline-block;
    background: #181818;
    padding: 20px;
    color: #fff;
    font-size: 24px;
}
span[lang="fa"] {
    direction: rtl;
    float: right;
    display: inline-block;
}
2 голосов
/ 08 марта 2020

Я бы рекомендовал использовать display:flex с justify-content: center для элемента section. Затем просто оберните текст на английском sh и фарси в div. Выровняйте текст engli sh вправо и установите направление текста на фарси на rtl.

Примерно так должно работать: 

<section style="display:flex; justify-content: center;">
  <div>
    <h3 style="text-align:right">
      I
      <span style="color: #42affa;">
        would
      </span> like a cup of coffee, please.
    </h3>
    <p style="direction:rtl">
      «لطفا یک فنجان قهوه لطف کنید.»
    </p>
  </div>
</section>
...