如何将文本与 CSS 相对对齐？答案

【问题标题】：How to relatively align text with CSS?如何将文本与 CSS 相对对齐？
【发布时间】：2018-08-30 10:25:57
【问题描述】：

我试图在我的方程式中对齐等号。我尝试了 span 和 div，但是如果 LHS 内容大小 > RHS，则对齐结束：

<span class="ctr">
    <span class="lft">\(1+2\ \) </span> \(=\) 
    <span class="lft"> \(\ 3\)</span>
</span>
<br>
<span class="ctr">
    <span class="lft">\(1+5\ \) </span> \(=\) 
    <span class="lft"> \(\ 6 + 2 - 2\)</span>
</span>
<br>
<span class="ctr">
    <span class="lft">\(1 + 3 + 2\ \) </span> \(=\) 
    <span class="lft"> \(\ 6 + 2 - 2\)</span>
</span>

.ctr{position: absolute; left: 40%;}
.lft{position: relative; display: inline;}

如何对齐任何等式大小的等号？感谢您的帮助。

【问题讨论】：

标签： html css alignment latex

【解决方案1】：

一种选择是您可以简单地使用表格并将左侧项目浮动到右侧，即.lft {float:right:}

在这里查看工作示例：https://jsfiddle.net/r6bxgem3/

表格如下所示：

.lft {
  float: right;
  display: inline;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.main {
  flex: 80%;
  background-color: white;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.left {
  flex: 20%;
  background-color: #f1f1f1;
  padding: 20px;
}

<head>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>
</head>

<div class="row">
  <div class="left">Stuff</div>
  <div class="main">

      <table><tr><td><span class="lft">
     
      \(1+2\ \)                                      <!--LHS-->
      </span></td><td>\(=\) </td><td>                <!--Equal sign-->
      \(\ 3\)                                        <!--RHS-->
      </td></tr><tr><td><span class="lft">

      \(1+5\ \)                                                         
      </span></td><td>\(=\)</td><td>
      \(\ 6+2-2\)                                                            
      </td></tr><tr><td><span class="lft">

      \(1+3+2\ \)                                                         
      </span></td><td>\(=\)</td><td>
      \(\ 6+2-2\)                                                           
      </td></tr>

      </table>

 </div></div>

希望这会有所帮助。

【讨论】：

@OverLordGoldDragon 我很高兴。编码愉快！

【解决方案2】：

.ctr {
    margin-left: auto;
    margin-right: auto;
}

<span class="ctr"><span class="lft">\(1+2\ \) </span> \(=\) <span class="lft"> \(\ 3\)</span></span><br>
<span class="ctr"><span class="lft">\(1+5\ \) </span> \(=\) <span class="lft"> \(\ 6 + 2 - 2\)</span></span><br>
<span class="ctr"><span class="lft">\(1 + 3 + 2\ \) </span> \(=\) <span class="lft"> \(\ 6 + 2 - 2\)</span></span>

你可以这样做：

这将做两件事：使<span>s 居中，并使它们具有响应性。

【讨论】：