如何使文本与CSS相对对齐? [英] How to relatively align text with CSS?
本文介绍了如何使文本与CSS相对对齐?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在公式中对齐等号.我尝试了span和div，但是如果LHS内容大小> RHS，则对齐结束:
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.
推荐答案
一种选择是，您可以简单地使用table并将左侧项目向右浮动，即 .lft {float:right:}
One option is that you can simply use table and float left side items to right i.e. .lft {float:right:}
在此处查看工作示例: https://jsfiddle.net/r6bxgem3/
Check here working example: 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>希望这会有所帮助.
这篇关于如何使文本与CSS相对对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
