Question

说我有一段这样的文字：

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

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

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

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

Answer 1

使用text-align CSS属性来对齐文本如果您想根据文字中的空格数进行对齐，请使用white-space保留空格，并结合等宽字体，小提琴：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>

Answer 2

您始终将文本放在表格中。可以让你对齐一切。

Answer 3

嗯，这有点严格，但希望这有帮助： http://jsfiddle.net/7RgcY/1/

正如您所见，诀窍在display: table-cell属性中。我在span标签中设置了6em宽度，这可能适用于短句，但您必须设置“固定”宽度才能使其正常工作。

可悲的是，代码不太干净......

Answer 4

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

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

Answer 5

text-align:right ??

http://jsfiddle.net/Q42U4/

Answer 6

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

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

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

6 个答案: