How to relatively align text with CSS?
How to relatively align text with CSS?
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>
.ctrposition: absolute; left: 40%;
.lftposition: relative; display: inline;
How can I align equal signs for any equation size? Help is appreciated.
2 Answers
2
One option is that you can simply use table and float left side items to right i.e. .lft float:right:
.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.
@OverLordGoldDragon my pleasure. Happy coding!
– VicJordan
Aug 30 at 2:17
.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>
What you can do is this:
This will do two things: make the <span>s centered, and also make them responsive.
<span>
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Excellent. Rearranged the code for simplicity: jsfiddle.net/r6bxgem3/21
– OverLordGoldDragon
Aug 30 at 2:15