Question

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

例如：

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

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

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

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

我的解决方案总是以居中而未正确对齐：

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

或右对齐但不居中

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

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

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

Answer 1

我将宽度设置为最小宽度：160像素（请考虑将要显示的文本）。至于居中-我使用margin：auto。对于右对齐，我使用…文本对齐：对。

看看：

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

如何使文本居中并正确对齐，同时保持响应速度

1 个答案: