是否可以在字符上水平对齐文本？答案

【问题标题】：Is it possible to align text horizontally on a character?是否可以在字符上水平对齐文本？
【发布时间】：2011-12-18 22:20:52
【问题描述】：

假设我有这样一段文字：

x = 2 / y
a + b + c = x

是否有可能通过 CSS（或其他技巧）来对齐这些线条，使它们最终看起来像这样？

        x = 2 / y
a + b + c = x

我想我可以将左侧部分放在一个表格列中，= 符号在下一个，右侧在第三个，然后使用右对齐、居中和左对齐，但这感觉不是特别干净或语义上正确：p

【问题讨论】：

将它们对齐不适合吗？
我认为他想用等号对齐，不，不是每个等式都在右侧留下一个数字或字符。
没错。我会调整这个例子更清楚:)

标签： css text alignment

【解决方案1】：

使用text-align CSS 属性对齐文本。
如果要根据文本中的空格数对齐，请使用 white-space 保留空格，并结合等宽字体 Fiddle: http://jsfiddle.net/cCLZy/

<style>
.right-align {
    /*text-align: right;*/
     white-space: pre; 
     font-family: monospace;
}
</style>

<!-- Spaces and newlines are preserved -->
<div class="right-align">
        x = 2
a + b + c = x
</div>

【讨论】：

当然可以，但是您需要先将它们与空格对齐，这可能会很烦人。这个问题的重点是避免这样做:)
实际上，大多数服务器端语言都提供了保留和使用空间等的构造，如果您在服务器端计算/存储这些计算，那么计算服务器端的间距可能会有点但更有效。无论哪种方式都应该不难。
这假定为等宽字体

【解决方案2】：

您总是将文本放在表格中。将允许您对齐所有内容。

【讨论】：

【解决方案3】：

text-align:right??

http://jsfiddle.net/Q42U4/

【讨论】：

我的例子太简单了。现在更新它以提出更多我的意思:)

【解决方案4】：

我没有测试这种方法，它可能需要一些调整，但它必须有效。如果你想对齐等号，你可以这样做：

<style>
.left {
width: x; /*You have to give them width to make the effect of two columns*/
text-align: right;
float: left;
}
.right {
width: x; /*You have to give them width to make the effect of two columns*/
text-align: left;
float: left;
}
.clr { clear: both; } /*Clear to keep next elements from floating too*/
</style>
<div class="left">
 <p>x = <br />
 a + b + c =</p>
</div>
<div class="right">
 <p>2 / y<br />
 x</p>
</div>
<div class="clr"></div>

【讨论】：

对不起，更新了例子，让大家更清楚为什么它不像右对齐那么简单，呵呵。

【解决方案5】：

这有点严格，但我希望这会有所帮助。

诀窍在于display: table-cell 属性，并为<span> 标签提供“固定”宽度。

例如，我给<span> 标记一个width:6em，它适用于较短的句子，例如下面的sn-p，或小提琴here。

body{ font-family:consolas, courier, monospaced }
div>span:nth-of-type(1){ text-align:right }
div>span:nth-of-type(3){ text-align:left }
div>span.equal:after{ content:'=' }
div>span{ display:table-cell; width:6em }
div>span.equal{ background:pink; width:1em; padding-left:0.5em }

<div>
  <span>x</span>
  <span class="equal"></span>
  <span> 2 / y</span>
</div>
<div>
  <span>a + b + c</span>
  <span class="equal"></span>
  <span>x</span>
</div>
<div>
  <span>x + y</span>
  <span class="equal"></span>
  <span>a + b + c</span>
</div>

【讨论】：

【解决方案6】：

一般来说，我会使用表格来进行这样的临时对齐。

但在对齐数学方程式的特定情况下，使用 LaTeX 等用于渲染数学的工具可能会更容易。在 LaTeX 中对齐方程非常简单和灵活。要将 LaTeX 添加到浏览器，可以使用 MathJax 或 KATEX 等 JS 库。

【讨论】：