如何使文本居中并使其正确对齐，同时保持响应答案

【问题标题】：How to center text and have it right aligned while keeping it responsive如何使文本居中并使其正确对齐，同时保持响应
【发布时间】：2018-10-22 05:41:55
【问题描述】：

我已经使用 css 几年了，但这个问题确实让我感到困惑。当空间可用时，我想右对齐一些文本并在更大的屏幕上保持文本内联。当屏幕尺寸缩小（在移动设备上）并且文本分成多行时，我需要文本居中但仍然右对齐。

例如：

足够的空间，一行中的所有内容都右对齐：

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

在小屏幕上，文本多行居中并右对齐：

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

我的解决方案总是居中而不是右对齐：

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

或右对齐但不居中：

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

这是一个演示问题的 jsfiddle (https://jsfiddle.net/jmn7yLgo/)。当有足够的空间时，文本可以很好地右对齐。但是，如果您缩小屏幕直到文本分成多行，您会注意到文本居中且不再右对齐。

当文本拆分为多行时，如何使文本居中和右对齐？

【问题讨论】：

标签： html css mobile responsive-design

【解决方案1】：

我将宽度设置为 min-width: 160px（考虑这是将显示的文本）。至于居中 - 我使用边距：自动。对于右对齐，我使用... well text-align: right。

看看：

<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>

【讨论】：

谢谢，但是当屏幕尺寸减小并且 $200,000,000 中断到另一行时，它是右对齐而不是在“可用总金额：”下居中，我需要多行居中但整个块右对齐。