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

如何将两个图标之间的文本居中+强制图标留在列表的中间?

要将两个图标之间的文本居中并强制图标留在列表的中间,可以使用CSS来实现。以下是一种常见的方法:

  1. 首先,确保文本和图标都包含在一个父容器中,例如一个 <div> 元素。
  2. 使用CSS的 display: flex; 属性将父容器设置为弹性布局。
  3. 使用 justify-content: center; 属性将文本和图标在父容器中水平居中。
  4. 使用 align-items: center; 属性将文本和图标在父容器中垂直居中。
  5. 使用 text-align: center; 属性将文本在其容器中水平居中。
  6. 使用 vertical-align: middle; 属性将图标在其容器中垂直居中。

以下是一个示例代码:

代码语言:html
复制
<div class="container">
  <span class="icon">图标1</span>
  <span class="text">文本</span>
  <span class="icon">图标2</span>
</div>
代码语言:css
复制
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  text-align: center;
}

.icon {
  vertical-align: middle;
}

这样,文本和图标就会在父容器中水平居中,并且图标会留在列表的中间位置。

对于腾讯云相关产品和产品介绍链接地址,由于不能提及具体品牌商,建议您访问腾讯云官方网站,查找与云计算相关的产品和服务。腾讯云提供了丰富的云计算解决方案,包括云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。

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

相关·内容

【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

, 如果 拉长浏览器宽度 , 搜索栏也会跟着拉长 ; 实现自动伸缩效果 : HTML 标签结构如下 : 最外层父容器 父容器内部两个半圆形子容器 ; 中间部分可自动伸缩子容器盒子 半圆子容器...margin: 14px 0 0 15px; } 右侧登录按钮 , 尺寸也是 40 x 44 大小 , 该按钮盒子通过定位设置 ; 右侧按钮直接写上 " 登录 " 两个字 , 垂直居中 , 行高 =...圆角半径为 15 像素 ; 总高度是 44 像素 , 搜索栏盒子高度 30 像素 , 设置该高度后 , 需要设置 7 像素 上边距 , 使得该搜索栏可以垂直居中 ; 如果为中间搜索栏盒子设置一个...-- 中间搜索框中 JD 图标 --> <!...*/ background-color: #333333; /* 文本水平居中 */ text-align: center; /* 文本颜色白色 */ color

2K30

HarmonyOS学习路之开发篇—— Java UI框架(基础组件说明【一】)

组件之间继承关系: 基础组件分类如下(个人分类): 文本类 Text,TextField 按钮类 Button,Switch,RadioButton,RadioContainer,Checkbox...ohos:line_height_num=“1.5” element_leftelement_topelement_rightelement_bottomelement_startelement_end 文本左侧图标文本上方图标文本右侧图标文本下方图标文本开始方向图标文本结束方向图标...② 按钮类 Button是一种常见组件,点击可以触发对应操作,通常由文本图标组成,也可以由图标文本共同组成。...… =“center” 表示不缩放,按Image大小显示原图中间部分。… =“inside” 表示将原图按比例缩放到与Image相同或更小尺寸,并居中显示。...… =“clip_center” 表示将原图按比例缩放到与Image相同或更大尺寸,并居中显示。 未完待续…

2K20
  • 魔法CSS(1)——消失list-style

    (需求)这部分UI给换成这样 看起来相对比较简单,分析下结构: 整体为无序列表,需要保留前置图标; 每个列表后跟随对号,且始终垂直居中; 嗯?...两个解决方案: 对ul进行margin把图标挤进容器 li有个list-style-position属性,设置为inside将图标放进li中就好(用这个把): 吐血,列表图标又给独占一行啦?...: 0; 试试父元素font-size: 0 发现列表下项图标没有了?...发现:看来列表图标相当与列表一文字,font-size可以控制其大小; 试试父元素li强制不换行?white-space: nowrap 哇!...再设置子元素p强制换行white-space: pre-wrap试试 赞;一个新常用需求诞生了(对好紧随列表垂直居中) 不对好像最初需求还没有坐呢?

    1.1K10

    Axure RP8入门之基本操作篇

    行间距:是指文字段落行与行之间空隙。 填充:是指文字与形状边缘之间填充空隙。 ### 10.设置元件默认隐藏 选择要隐藏元件,在快捷功能或者元件样式中勾选【隐藏】选项。...### 17.设置矩形为其他形状 在画布中点击矩形右上方圆点图标即可打开形状列表,设置为其它形状。...### 24.设置图片文本 设置图片文本需要在图片上点击,选择【编辑文本】,方可进行图片上文字编辑 ### 25.切割/裁剪图片 在图片元件属性中,设有切割和裁剪功能图标,点击即可使用相应功能...### 31.切换元件库 在元件库功能面板中,可以通过点击元件库列表,选择不同元件库进行使用。 ## 第二章 页面设置 ### 32.设置页面居中 在页面【样式】设置中选择页面居中按钮。...选择【边框重合】时,两个形状中间边框为细边框;选择【边框并排】时,两个形状中间边框为粗边框。 ### 42.设置画布中遮罩阴影 在【菜单】-【视图】-【遮罩】选项列表中,取消相应勾选。

    5.1K30

    计算机科学里最大难题:居中显示

    图 标 图标就像是与文本排成一行小矩形。因此,所有由文本和行高引起问题这里也都存在。众所周知,将文本与旁边图标对齐是一项艰巨任务。...Atom: 前 Twitter 平台: iOS: Mozilla: YouTube: 有时候图标高过文本: 有时候文本高过图标: 有时候两者都未能完美居中: 有些图标就是普通 HTML 表单控件: 有些添加了艺术效果...一: 二: 三: 四: 五: 六: 七: 和文本对齐一样,糟糕图标对齐也是数不胜数。 技能问题 不只是程序员会遇到居中失败问题。...它参数如下: 你在设置font-size时,你设置是 UPM(这个也等于1em)。然而,文本块实际占用空间是 ascender 和 descender 之间空间。...没有什么比对齐两个矩形更容易了。没有什么比尝试对齐被任意数量空白包围文本更困难了。 这是一场我们赢不了游戏。

    8610

    计算机科学里最大难题:居中显示

    图 标 图标就像是与文本排成一行小矩形。因此,所有由文本和行高引起问题这里也都存在。众所周知,将文本与旁边图标对齐是一项艰巨任务。...Atom: 前 Twitter 平台: iOS: Mozilla: YouTube: 有时候图标高过文本: 有时候文本高过图标: 有时候两者都未能完美居中: 有些图标就是普通 HTML 表单控件: 有些添加了艺术效果...一: 二: 三: 四: 五: 六: 七: 和文本对齐一样,糟糕图标对齐也是数不胜数。 技能问题 不只是程序员会遇到居中失败问题。...它参数如下: 你在设置font-size时,你设置是 UPM(这个也等于1em)。然而,文本块实际占用空间是 ascender 和 descender 之间空间。...没有什么比对齐两个矩形更容易了。没有什么比尝试对齐被任意数量空白包围文本更困难了。 这是一场我们赢不了游戏。 我们能做些什么:视觉补偿 作为开发人员,我们只能通过数学方法实现矩形完美对齐。

    10610

    培训小程序首页开发

    先打开我们创建自定义应用,在代码区点击新建,创建一个数据表查询图片数据表选择分类,方法选择查询列表图片2 欢迎语搭建变量定义好之后就要考虑组件搭建,页面的话我们头部添加一个背景图,中间部分用图标加文字形式展示想添加一个普通容器作为背景图片设置高度为...250px,背景为图片背景图片在添加一个普通容器用来放置我们欢迎语,高度设置为149px图片继续添加一个普通容器,用来显示文本,设置40px内边距图片里边添加两个文本组件图片修改文本组件内容,设置...12px内边距,设置第一个文本组件文本格式为H4图片3 分类导航搭建选中最外层普通容器,添加一个普通容器来放置我们分类信息图片设置一定背景色和圆角图片继续添加一个普通容器,宽设置为94%,外边距为...auto,这样就让普通容器居中显示图片self { width: 94%; margin-right: auto; margin-left: auto; padding-top:...50px; padding-right: 7.5px; padding-left: 7.5px}普通容器里添加一个数据列表,数据源选择分类,模板选择图文列表图片先精简一下组件,只保留图片和文本组件图片然后将边框样式去掉图片然后给普通容器绑定背景色图片图片现在组件之间有点挤

    16020

    【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )

    ; Align : 布局设置组件 , 一般设置布局居中操作 ; Padding : 设置内边距组件 ; SizeBox : 用于约束布局大小组件 ; FractionallySizedBox :...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...// 列表发生下拉操作时, 回调该方法 // 该回调是 Future 类型 onRefresh: _refreshIndicatorOnRefresh..., 列表处于刷新状态 // 500 ms 之后 , 列表变为非刷新状态 await Future.delayed(Duration(milliseconds: 500)); return...null; } } 运行效果展示 : 第二行整体布局放在 Row 组件中 , 横向布局中放置了两个组件 , 第一个 Image 组件显示原始图片 , 第二个组件是经过 SizedBox 组件约束大小

    2.3K00

    Markdown:解放排版,简洁高效文字创作神器!

    Markdown 会自动识别换行,但如果需要强制换行,可以在行末添加两个空格。列表Markdown 支持有序列表和无序列表。 有序列表使用数字加英文句点,无序列表使用星号、加号或减号。例如:1....有序列表项2* 无序列表项A+ 无序列表项B- 无序列表项C链接插入超链接语法如下:[链接文本](链接地址)例如:[点我直接访问百度](https://www.baidu.com)图片插入图片语法与链接类似...***删除线要在文字上添加删除线效果,可以使用两个波浪线:~~这是带删除线文字~~以上是 Markdown 中常用文本格式化方法,它们使文本更具表现力和可读性。...表格对齐和格式设置可以通过在表头下方冒号位置来设置表格中文本对齐方式:冒号在左侧:左对齐冒号在右侧:右对齐冒号在两侧:居中对齐例如:| 左对齐 | 居中对齐 | 右对齐 ||:------|:--...-----:|-------:|| 文本1 | 文本2 | 文本3 || 文本4 | 文本5 | 文本6 |效果:左对齐居中对齐右对齐文本1 文本2 文本3 文本4 文本5 文本6

    15910

    Android使用自定义View实现横行时间轴效果

    根据上图可以总结出以下几点: 每个阶段要显示时间、阶段名、状态图标中间有虚线; 文字上下交错显示; 相邻阶段文字在垂直方向上是可以相交; 时间轴个数不确定,但是要铺满屏幕并且不可滑动; 如果只实现上两点效果...它包括: 垂直居中一条虚线; 一个表示状态图标; 一个显示时间文本块; 一个显示阶段名文本块; 三、开始画 有了上面的分析,接下来就要开始画了。 1....画中间线 首先画虚线,如果虚线不知道怎么画,可以先画一条实线,然后再去找画虚线方法。...根据参数得知需知道线起点与终点坐标以及一个 paint 对象,因为是垂直居中且横穿整个控件直线所以可以确定两个 y 坐标是一样,也就是控件高一半,起点 x 坐标为0,终点 x 坐标为控件宽...当文本图标上方时,文本 y 坐标需要使用图标的 y 坐标减去文本图标的距离,x 坐标同图片 x 坐标一样;当文本图标下方时,文本 y 坐标需要使用图标的 y 坐标加上文本图标的距离。

    81110
    领券