当前位置: 首页 > 知识库问答 >
问题:

前端 - 文本对齐问题,之前提过类似的但是没有考虑到文本换行情况?

竺勇
2023-08-11

图片
要求是测试和下面的数字垂直居中,亿元不要参与对齐,一直跟在数字的后面,并且垂直居中于数字一行,并且要考虑到数字过多然后换行的情况。

共有1个答案

禄和宜
2023-08-11

很简单的哇,把 “亿元” 两个字使用绝对定位挂在数字后面就行了,或者数字设置一个负的 margin-right

以下是示例代码:
图片.png

<!-- 使用绝对定位 --><body>  <div class="demo">    <div class="title">测试</div>    <div class="number">      216.11      <span class="unit">亿元</span>    </div>  </div></body><style>  .demo {    line-height: 35px;    text-align: center;    color: #303030;  }  .demo .title {    font-size: 13px;  }  .demo .number {    font-size: 20px;    font-weight: bold;    position: relative;  }  .demo .number .unit {    font-size: 12px;    font-weight: normal;    position: absolute;  }</style>
<!-- 使用 margin-right: -36px --><body>  <div class="demo">    <div class="title">测试</div>    <div class="number">      216.11      <span class="unit">亿元</span>    </div>  </div></body><style>  .demo {    line-height: 35px;    text-align: center;    color: #303030;  }  .demo .title {    font-size: 13px;  }  .demo .number {    font-size: 20px;    font-weight: bold;    margin-right: -35px; /* "亿元"两个字的宽度 */  }  .demo .number .unit {    font-size: 12px;    font-weight: normal;  }</style>
 类似资料:
  • 问题内容: 我们要使text-align:justify占据列的所有宽度,但是它应该从右侧开始。有什么办法可以用css或以某种方式使其成功吗? 编辑: 可以,但是有标点符号的问题。 解决了 这最终解决了标点符号的问题。谢谢大家的努力!我将接受第一个答案。 问题答案: 我相信您可能想要这样的东西:

  • 本文向大家介绍iOS对齐文本,包括了iOS对齐文本的使用技巧和注意事项,需要的朋友参考一下 示例 Swift Objective-C            

  • 我在stackoverflow上查看了很多答案和问题,但没有发现任何对我的问题有帮助的东西。 我有两个大小相同、属性相同的TextView,它们紧挨着彼此,xml布局是这样的(只有textsize不同) 代码是这样的 包com.example.fonttest;导入android.os.包;导入android.app.活动;导入android.graphics.字体;导入android.view.

  • 在Twitter的Bootstrap框架中是否有一组对齐文本的类? 例如,我有一些带有合计的表,我希望它们向右对齐... 而且

  • 我试图捕获关键字后面的文本,一直到行的结尾。我花了很多时间在堆栈交换和在线regex测试人员上,试图找到正确的组合。 我非常接近,但我的输出继续捕获新的行。regex101.com声明.*?匹配任何字符(换行符除外)。我很难理解为什么它总是捕获换行符。 下面是我正在搜索的文本的一个片段: Blahblahlah\n公司:BALDWIN LINE CONST OF MD Inc\n联系人姓名:STE

  • 我有一个元素,它被包装在较小的屏幕中,如何使用CSS使包装的文本对齐自己? 这就是我想要的