如何使文本居中对齐，同时保持响应性
如何使文本居中对齐，同时保持响应性
提问于 2018-10-22 02:28:50
我使用css已经有几年了，但是这个问题真的让我很困惑。我想要右对齐一些文本，并在空间可用时使文本在较大的屏幕上保持内联。当屏幕尺寸缩小(在移动设备上)，文本分成多行时，我需要文本居中但仍然右对齐。
例如：
足够的空间，一行上的所有内容都正确对齐：
------------------------------------
Total Amount: $200,000|
------------------------------------在小屏幕上，文本以多行居中并右对齐：
--------------------
Total Amount:|
$200,000 |
--------------------我的解决方案总是居中，而不是正确对齐：
--------------------
Total Amount: |
$200,000 |
--------------------或右对齐但不居中：
--------------------
Total Amount:|
$200,000|
--------------------这是一个演示这个问题的jsfiddle (https://jsfiddle.net/jmn7yLgo/)。当有足够的空间时，文本可以右对齐。但是，如果缩小屏幕直到文本拆分为多行，您会注意到文本变得居中并且不再右对齐。
当文本拆分为多行时，如何使文本既居中又右对齐？
回答 1
Stack Overflow用户
发布于 2018-10-22 02:52:45
我将宽度设置为min- width : 160px (假设这就是将要显示的文本)。至于居中-我使用页边距: 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52918522
复制相关文章
相似问题
腾讯云开发者
