How to relatively align text with CSS?

Question

I seek to align equal signs in my equations. I tried span and divs, but the alignment ends if LHS content size > RHS's:

https://jsfiddle.net/gytmx256/6/

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

How can I align equal signs for any equation size? Help is appreciated.

Vikasdeep Singh Vikasdeep Singh · Accepted Answer · 2018-08-30T01:27:45

One option is that you can simply use table and float left side items to right i.e. .lft {float:right:}

Check here working example: https://jsfiddle.net/r6bxgem3/

Table will look like below:

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

Hope this will be helpful.

How to relatively align text with CSS?

2 Answers