首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将行中不同大小的文本与底部对齐

是一种排版技术,用于在同一行中对齐不同大小的文本元素,使它们在底部对齐。

这种排版技术可以通过CSS的属性和方法来实现。以下是一种常见的实现方式:

  1. 使用display: flex;属性:将包含不同大小文本的容器设置为flex布局,通过设置align-items: flex-end;属性,使文本在容器的底部对齐。

示例代码:

代码语言:txt
复制
.container {
  display: flex;
  align-items: flex-end;
}

.small-text {
  font-size: 12px;
}

.large-text {
  font-size: 20px;
}
代码语言:txt
复制
<div class="container">
  <span class="small-text">小号文本</span>
  <span class="large-text">大号文本</span>
</div>
  1. 使用vertical-align属性:将不同大小的文本元素设置为inline或inline-block元素,并通过设置vertical-align: bottom;属性,使文本在行内底部对齐。

示例代码:

代码语言:txt
复制
.small-text {
  font-size: 12px;
  display: inline-block;
  vertical-align: bottom;
}

.large-text {
  font-size: 20px;
  display: inline-block;
  vertical-align: bottom;
}
代码语言:txt
复制
<span class="small-text">小号文本</span>
<span class="large-text">大号文本</span>

这种排版技术适用于需要在同一行中对齐不同大小文本的场景,例如在导航菜单中,希望菜单项的文本在底部对齐以保持整齐的视觉效果。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云CSS:腾讯云提供的云服务器服务,可用于搭建网站和应用程序。
  • 腾讯云CDN:腾讯云提供的内容分发网络服务,可加速网站和应用程序的访问速度。
  • 腾讯云云数据库MySQL版:腾讯云提供的云数据库服务,支持MySQL数据库。
  • 腾讯云云函数:腾讯云提供的无服务器函数计算服务,可用于编写和运行代码。
  • 腾讯云人工智能:腾讯云提供的人工智能服务,包括图像识别、语音识别、自然语言处理等功能。
  • 腾讯云物联网:腾讯云提供的物联网平台,可用于连接和管理物联网设备。
  • 腾讯云移动开发:腾讯云提供的移动应用开发服务,包括移动应用测试、推送服务等功能。
  • 腾讯云对象存储:腾讯云提供的对象存储服务,可用于存储和管理大规模的非结构化数据。
  • 腾讯云区块链:腾讯云提供的区块链服务,可用于构建和部署区块链应用。
  • 腾讯云虚拟专用网络:腾讯云提供的虚拟专用网络服务,可用于构建安全可靠的网络环境。
  • 腾讯云安全产品:腾讯云提供的安全产品,包括DDoS防护、Web应用防火墙等功能。

请注意,以上仅为腾讯云相关产品的示例,其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

不同大小文字底部对齐,为什么不能使用flex-end

flex容器下,不同大小文字底部对齐,为什么应该使用 baseline 而不是 flex-end?...:图片可以看到两个字体所在矩形虽然对齐了,但是两个文字底部并没有对齐。...分析原因发现,是因为文字周围有一圈空白边距,这个边距在字体大小不同情况下是不一致,所以矩形区域虽然对齐了,但是文字底部没有对齐。...图片使用 line-height 正确方法在完全去掉周围边距这种方法不可用情况下,只能通过把不同字体大小透明边距宽度设置为一致就可以了。...而 first baseline 和 last baseline 应该是在多行文本情况下有多个 baseline 情况时,要对齐第一个 baseline 还是最后一个 baseline,实测如下:first

89140

AndroidGlide动态加载不同大小图片切圆角圆形方法

,centerCrop()和fitCenter(): //使用centerCrop是利用图片图填充ImageView设置大小,如果ImageView //Height是match_parent则图片就会被拉伸填充...ImageView而是想获取资源Bitmap对象: //括号300,600代表宽和高但是未有作用 SimpleTarget target = new SimpleTarget<Bitmap (300,600...” 就会出现很多文章,但这些都不能解决上面的问题 怎样能 Glide动态加载不同大小图片切圆形图片跟圆角图片呢?...解决很简单 既然是图片大小不一致而导致图片切出来不一样,那就把图片变一样大小不就可以吗 申明一下我代码也是在Glide动态加载圆形图片跟圆角图片搜出来代码基础上修改....changeBitmapSize(Bitmap bitmap) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); //设置想要大小

3.5K20
  • 五、Web App 基础可视组件属性(IVX 快速开发教程)

    五、基础可视组件属性 在 iVX 各个组件存在不同属性,这些属性用于设置显示样式或者是自身具备特征等,通过更改这些属性可以极大方便我们进行项目的创作。...列内、外边距 5.2.3 、列边框 5.2.4 、列元素呈现方式 5.3 文本属性 5.3.1 文本属性 5.3.2 最大字符数溢出效果 5.3.3 最大行数 5.3.4 文字颜色字体样式...在此我们讲解常用 3 个可选项顶部、居中、底部 垂直对齐 设置为 顶部,页面 可视对象 将会从顶部依次往下进行显示; 垂直对齐 设置为 居中,那么页面 可视对象 将会从页面的 垂直中部...进行显示,底部选项 则是从底部开始显示: 5.1.4 水平对齐 水平对齐 指 页面 元素横排如何进行显示。...,元素设置 具体像素 时将会超出行列进行显示,但是在设置成 百分比 时永远按照百分比大小进行显示。

    4K20

    关于 vertical-align 你应该知道一切

    前言 vertical-align,写过 CSS 朋友们肯定都知道这个属性作用,顾名思义,垂直对齐,主要目的用于将相邻文本元素对齐。...content area:围绕文字看不见 Box,其大小 font-size 有关 inline boxes:不会成块显示,而是并排显示在一 boxes ,如 span、 a、 em 等标签以及匿名...top bottom 对于内联元素,指的是元素顶部(底部)和当前行框盒子顶部(底部对齐;即 line-box 顶部(底部对齐。...text-bottom,指的是盒子底部和父级内容区域底部对齐,即 content-area 底部对齐。 例子如下: ?...box,其大小 font-size 有关,可以看成是鼠标选中文字后高亮背景色区域,上面的例子,由于父元素字体设置是 16px ,所以图片 vertical-align 设置 text-top

    2.7K20

    【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )

    */ padding-top: 10px; } 列表项高度是 60 像素, 文字顶部有 10 像素间隔 , 这里列表项设置成 50 像素 , 此位置直接写文字即可 , 多行文本无法设置居中 ,...以达到多行文本居中对齐效果 */ margin-top: 10px; } 列表项三种文本 , 样式如下 : /* Banner 条右侧 课程表 无序列表 列表项 继续学习 文本样式 */...; /* 水平对齐 */ text-align: center; /* 垂直对齐 - 高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮... 列表项 链接样式 */ .subnav li a { /* 默认情况下为白色 */ color: #fff; /* 字体大小 14 像素 */ font-size: 14px; /*...; /* 水平对齐 */ text-align: center; /* 垂直对齐 - 高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮

    3.6K60

    2014-10-25Android学习------布局处理(-)

    其中,wrap_content表示填满父控件空白,fill_parent表示大小刚好足够显示当前控件里内容,match_parentfill_parent作用是相同。...":随着文字栏位不同 而改变这个视图宽度或者高度。...带"layout"属性是指整个控件而言,是父控件之间关系,如 layout_gravity 在父控件对齐方式, layout_margin 是级别相同控件之间间隙等等; 不带"layout..." 属性是指控件中文本格式,如gravity是指文本对齐方式等等,而其中文本格式又受制约于它控件在父控件属性. 2)线性布局方向设置:android:orientation="";...附加选项,用于按照容器边来剪切对象顶部和/或底部内容. 剪切基于其纵向对齐设置:顶部对齐时,剪切底部底部对齐时剪切顶部;除此之外剪切顶部和底部.

    1.4K40

    【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

    绘制矩形框部分 : 一、网页底部盒子模型测量及样式 ---- 1、盒子布局说明 底部盒子主要由如下部分组成 : 红色盒子 : 最外层盒子 水平方向 充满整个 浏览器 , 背景是白色 ; 蓝色盒子...*/ text-align: center; /* 垂直居中对齐 - 高 = 内容高度 */ line-height: 34px; /* 文本大小和颜色值 */ font-size: 16px...*/ text-align: center; /* 垂直居中对齐 - 高 = 内容高度 */ line-height: 34px; /* 文本大小和颜色值 */ font-size: 16px...; /* 水平对齐 */ text-align: center; /* 垂直对齐 - 高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮...*/ text-align: center; /* 垂直居中对齐 - 高 = 内容高度 */ line-height: 34px; /* 文本大小和颜色值 */ font-size: 16px

    4.2K30

    六、WebApp 二手信息站点页面制作(IVX 快速开发教程)

    类型分类轮播页;内容展示部分分为图片信息以及底部具体页尾内容。...我们根据基本 和 列 制作网站标题头: 我们可以看到,该标题头可以当做是两个,左侧一个、右侧一个;在此可以者两个内容放在一个,这两个宽度各为 50%,左侧 水平对齐 为 左对齐,...右侧 水平对齐 为 右对齐,通过这样设置,即可完成示例所示,完成不同元素显示。...水平对齐 为 右侧对齐,垂直对齐 均为 居中: 接下来在 标题左侧 添加两个文本,修改文本属性后即可完成更改颜色: 在此你可能对该文本紧贴左侧边缘并不喜欢,可以更改该文本属性 左外边距...名为 登录块,再到 登录块 创建一个名为登录内容 组件,在登录内容创建 4 个 组件,分别用作用命名包裹按钮文本,设置 水平对齐 为 居中 即可,对象树 如下: 注册页也同理: 6.2.2

    1.9K30

    网页设计基础知识汇总——超链接

    决定标题放在表格顶部、底部、右边、左边、中间。 (row)、表头(head)、数据(data): :放在最外层,创建一个表格; :创建一; ......valign:垂直对齐方式,取值为top(靠顶端对齐)、 middle(居中间对齐)、bottom(靠底部对齐)。...如果某个单元格是空(没有内容),浏览器可能无法显示出这个单元格边框。为了避免这种情况,在空单元格添加一个空格占位符,就可以边框显示出来。...、单元格和表格标签关系:标签对只有放在标签对之间才有效;                                        输入 文本也只有放在...div标签作用:W3C 在其最新 XHTML2 草案 XHTML 结构模型这样定义 div: div 元素,通过 id 、 class 及 role 属性配合,提供向文档添加额外结构通用机制

    3.3K30

    CSS进阶05-行内格式上下文IFC

    用户代理必须通过其相关基线非替换行内框字形彼此对齐。然后,对于每个字形,确定A和D。需要注意是在单个元素内字形可能来自不同字体,因此不需要都具有相同A和D。...这在不同字体文本列必须对齐时非常重要,比如在table。 2.3 垂直对齐属性vertical-align ? vertival-align 此属性影响行内级元素生成盒子在行盒内垂直定位。...对于其他所有元素,用于对齐盒是margin box。 baseline 基线父盒基线对齐。如果盒没有基线,将其bottom margin edge父盒 baseline 对齐。...该对齐子树top是子树内最高盒顶部,bottom也是类似这样。 top 把对齐子树顶部盒顶部对齐。 bottom 把对齐子树底部底部对齐。...为了格式化该段落,客户端五个行内盒放进若干盒line boxes。在这个例子,由 p 元素生成盒创建了这些包含块。 如果该包含块足够宽,所有的行内盒放置在单个盒中,如下: ?

    1.7K30

    面试题必备-web页面基础

    ,因此在制作网页时候,我们要将网页每个功能模块分开 常见多由头部区,展示图片区域,主题区域,底部信息区域组成。...italic文本斜体显示 oblique文本倾斜显示 文本属性 高line-height 文本水平对齐方式 text-align left,center,right 文本所在行高垂直对齐方式...vertical-align baseline默认 sub垂直对齐文本下标 super垂直对齐文本上标 top对象顶端所在容器顶端对齐 text-top对象顶端所在行文字顶端对齐...middle元素对象基于基线垂直对齐 bottom对象底端所在行文字底部对齐 text-bottom对象底端所在行文字底端对齐 文本缩进text-indent text-indent:...2em; 字母之间间距letter-spacing 单词之间间距word-spacing 文本大小写: text-transform capitalize:文本每个单词以大写字母开头 uppercase

    2.4K10

    HarmonyOS-UIAbitity-枚举说明——【坚果派-红目香薰】

    FlexAlign 名称 描述 Start 元素在主轴方向首端对齐,第一个元素对齐,同时后续元素前一个对齐。...Center 元素在主轴方向中心对齐,第一个元素距离最后一个元素行尾距离相同。 End 元素在主轴方向尾部对齐,最后一个元素行尾对齐,其他元素后一个对齐。...End 元素在Flex容器,交叉轴方向底部对齐。 Stretch 元素在Flex容器,交叉轴方向拉伸填充,在未设置尺寸时,拉伸到容器尺寸。...Baseline 元素在Flex容器,交叉轴方向文本基线对齐。 FlexDirection 名称 描述 Row 主轴方向一致作为布局模式。...LineThrough 穿过文本修饰线。 Overline 文字上划线修饰。 None 不使用文本装饰线。 TextCase 名称 描述 Normal 保持文本原有大小写。

    14110

    Windows 8.1 应用再出发 - 几种常用控件

    OpticalMarginAlignment  枚举值,指定在文本容器边界对齐时如何处理每个字符版式靠边值。有None(默认值) 和 TrimSideBearings 两种。...None:使用来自字体版式值侧方位,TrimSideBearings:不使用来自字体版式值边位,且不将字形一侧字形"墨迹"部分开始位置对齐 TextAlignment  枚举值,指示文本内容水平对齐方式...Full:使用常规高计算,Tight:顶部高度是字体大写字高,底部告诉是文本基线,TrimToBaseline:底部文本基线,TrimToCapHeight:顶部高度是字体大写字高。...即使最后溢出是单一单词,也仍然换行,WrapWholeWords:Wrap唯一不同是,对单一单词不换行。...Center:父元素布局中心对齐元素,Left:父元素布局左侧对齐元素,Right:父元素布局右侧对齐元素,Stretch:拉伸以填充整个父元素布局槽元素。

    2.2K40

    【CSS】课程网站 网格商品展示 模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )

    1 , 2 或 3 ; 2、标题盒子尺寸测量和样式 文本所在盒子 , 顶部导航栏有 15 像素间隔 , 这里使用 上外边距 设置 ; /* 网格商品展示模块大盒子 距离上面的 导航栏...= 内容高度 , 这里精确测量 " 精品推荐 " 文本内容高度 ; 该文本盒子如下图所示 , 文本内容 20 像素 , 文本上面和下面各有 20 像素空白 ; 高直接设置为 60 像素...*/ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 在浏览器居中对齐 */ .w { width: 1200px;... 列表项 链接样式 */ .subnav li a { /* 默认情况下为白色 */ color: #fff; /* 字体大小 14 像素 */ font-size: 14px; /*...; /* 水平对齐 */ text-align: center; /* 垂直对齐 - 高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮

    4.3K40

    腾讯开源超实用UI轮子库,我是轮子搬运工

    使用不同 Builder 来构建不同类型对话框,这些 Builder 都拥有设置 title 和添加底部按钮功能,不同 Builder 特有的作用如下: MessageDialogBuilder...QMUI 用于 QMUITabSegment Tab 数据适配。...QMUIQQFaceCompiler QMUIQQFaceView 内容解析器,文本内容解析成 QMUIQQFaceView 想要数据格式。...QMUIRoundButton 对 Button 提供圆角功能,支持以下特性: 指定圆角大小。 分别指定不同方向圆角大小。 指定圆角大小为高度一半,并跟随高度变化自适应圆角大小。...AbsoluteSizeSpan 可以调整字体大小,但在中英文混排下由于decent不同,无法根据具体需求进行底部对齐或者顶部对齐

    4.8K30
    领券