可以在字符上水平对齐文本吗？

Question

假设我有这样一段文本：

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

通过CSS（或其他技巧）是否有可能使这些行对齐，以达到以下效果？

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

我想我可以将等式左边放在第一列，等号放在第二列，右边的部分放在第三列，然后使用右对齐，居中和左对齐来排版。但这种方式并不感觉干净或语义正确 :p。

- Svish

---

将它们都右对齐不就可以了吗？ - ayyp

我认为他想要通过等号对齐，不是每个方程式右侧都只有一个数字或字符。 - BoltClock

没错。我会微调示例以使其更清晰 :) - Svish

Answer 1

使用CSS属性text-align来对齐文本。
如果您想根据文本中的空格数量进行对齐，请使用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>

- Rob W

---

当然，但是你需要先将它们与空格对齐，这可能会很烦人。这个问题的重点在于避免这样做 :) - Svish

实际上，大多数服务器端语言都提供结构来保留和使用空间等。如果您在服务器端计算/存储这些计算，可能会更有效地找出服务器端的间距。无论哪种方式，都不应该很难。 - sg3s

假设使用等宽字体 - allanberry

Answer 2

可能有点严格，但我希望这可以帮到你。

关键在于 display: table-cell 属性，以及给 <span> 标签一个“固定”的宽度。

例如，我给 <span> 标签设置了 width:6em，这适用于较短的句子，如下面的代码片段或 这里 的演示。

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>

- Arkana

Answer 3

通常，我会使用表格来做这种临时的对齐。

但在特定情况下，比如对齐数学公式，使用专门用于呈现数学的工具（如LaTeX）可能会更容易。在LaTeX中对齐方程非常简单和灵活。要将LaTeX添加到浏览器中，您可以使用JS库，例如MathJax或KATEX。

- Nolan Edric

Answer 4

你总是把文本放在表格中，这样可以让一切对齐。

- CamelSlack

Answer 5

我没有测试过这种方法，可能需要一些调整，但应该可以工作。如果您想对齐等号，可以这样做：

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

- Canijochamaco

---

抱歉，我更新了示例以使其更清晰，说明为什么它不像右对齐那样简单，呵呵。 - Svish

Answer 6

text-align:right ??

http://jsfiddle.net/Q42U4/

- Damon Bauer

---

本来可以用我太简单的例子的。现在更新了，以更好地表达我的意思 :) - Svish