如何用CSS相对对齐文本?

2024-01-10

我寻求对齐等号在我的方程中。我尝试了 span 和 div,但对齐结束于内容大小 > RHS:

https://jsfiddle.net/gytmx256/6/ 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;}

如何为任意大小的方程对齐等号?感谢帮助。


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

检查这里的工作示例:https://jsfiddle.net/r6bxgem3/ 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>

希望这会有所帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何用CSS相对对齐文本? 的相关文章

  • 身体动画不流畅

    下面代码中的 spaceShip 在开始按住任何箭头键时移动并不顺利 它移动一步 冻结一瞬间 然后 平稳 地移动 怎样才能让它从一开始就顺利运转 而不是 冻结 My code
  • 如何在 PHP 的 HTML 页面中显示错误消息?

    我有以下登录表单 login php 其中要求输入用户名和密码
  • 更改元素的顺序

    我正在创建一个浮动宽度的网站 用户在智能手机上使用从全高清分辨率到约 600 像素的屏幕 这似乎是一个不错的主意 这就带来了一个非常有趣的问题 当用户使用比最佳分辨率更小的分辨率时 页面的高度会增加很多 这意味着更改某些元素 例如某些图像
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • 如何在有序列表中组合数字和字母?

    如何在 CSS 中用数字和字母递增有序列表 ol nested margin bottom 0 counter reset item ol nested li display block position relative ol neste
  • 如何消除 HTML 内容周围的边距?

    以下 HTML 显示正常 div style width 100px height 100px background red div Hello div div
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • html 选择列表 - 通过传入变量获取文本值?

    我有一个显示列表语言的选择列表
  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 我如何能够以两行显示标题,并且每行的字体大小不同?

    我正在使用 Google Chart API 创建时间线图 并希望将图的标题修改为两行 问题 我如何能够显示具有不同字体大小的两线图表标题 电流输出 理想输出 相关研究 我唯一能找到的是有人试图用饼图来做到这一点 但我尝试了但无法使其发挥作
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 为什么我的淘汰单选按钮在另一个具有点击绑定的元素内时会失败?

    我有一个单选按钮列表 我想要点击 li 他们还检查单选按钮 这一切都有效 直到我放了一个name单选元素上的属性 然后我的代码停止工作 我的代码如下所示 ul li li ul li
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 有角度的动态背景图片

    在 html 模板中 我有这种带有动态图像的样式 div style background none width 200px height 150px div 它适用于网络浏览器和 Android 浏览器 但是 使用 style 的动态背景
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n

随机推荐