Как отцентрировать текст и выровнять его по правому краю, сохраняя при этом его адаптивность - PullRequest
Новая
       30

Как отцентрировать текст и выровнять его по правому краю, сохраняя при этом его адаптивность

0 голосов
/ 21 октября 2018

Я использую css уже пару лет, но эта проблема действительно озадачила меня.Я хочу выровнять текст по правому краю и оставить текст встроенным на больших экранах при наличии свободного места.Когда размер экрана уменьшается (на мобильном устройстве) и текст разбивается на несколько строк, мне нужно, чтобы текст располагался по центру, но выравнивался по правому краю.

Например:

Достаточно места, все на одномвыравнивание по правому краю: 

------------------------------------
             Total Amount: $200,000|
------------------------------------

На маленьких экранах текст центрируется на нескольких строках и выравнивается по правому краю: 

--------------------
      Total Amount:|
        $200,000   |
--------------------

Мои решения всегда оказываются по центру, а не по правому краю: 

--------------------
   Total Amount:   |
      $200,000     |
--------------------

или по правому краю, но не по центру: 

--------------------
      Total Amount:|
           $200,000|
--------------------

Вот jsfiddle (https://jsfiddle.net/jmn7yLgo/), который демонстрирует проблему. Текст выравнивается по правому краю, когда достаточно места. Но, еслиВы сжимаете экран до тех пор, пока текст не разделится на несколько строк, и вы заметите, что текст становится по центру и больше не выравнивается по правому краю.

Как сделать так, чтобы текст был и по центру, и по правому краю, когда текст разделяется нанесколько строк?

1 Ответ

0 голосов
/ 21 октября 2018

Я установил ширину в min-width: 160px (учтите, что это текст, который будет отображаться).Что касается центрирования - я использую поле: авто.А для выравнивания по правому краю я использую… ну, выравнивание текста: вправо.

Взгляните: 

<div style="max-width: 75%; margin: auto;">
   <div style="text-align: right;">
     <span style="display: inline-block; min-width: 160px;">Total Amount Available:</span>
     <span>$200,000,000</span>
   </div>
</div>

РЕДАКТИРОВАТЬ: 

<style>
@media screen and (max-width: 320px) { div {width: 200px; }span {display: block;} }
</style>
<div>
   <div style="text-align: right;">
     <span>Total Amount Available:</span>
     <span>$200,000,000</span>
   </div>
</div>
...