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

Bootstrap将图标左侧对齐,文本在顶部栏居中对齐

Bootstrap是一个流行的前端开发框架,它提供了丰富的组件和样式,可以快速构建响应式网页。要实现图标左侧对齐,文本在顶部栏居中对齐,可以使用Bootstrap提供的栅格系统和内置的样式类。

首先,我们需要创建一个顶部栏,可以使用Bootstrap的导航栏组件。导航栏组件提供了一个容器,可以放置图标和文本。

代码语言:txt
复制
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <i class="fas fa-icon"></i> Logo
  </a>
</nav>

在上面的代码中,我们使用了navbarnavbar-brand样式类来创建一个顶部栏和一个带有图标和文本的导航栏品牌。

接下来,我们需要将图标左对齐。Bootstrap提供了一组图标字体,可以使用<i>标签和相应的类来插入图标。在上面的代码中,我们使用了fas fa-icon类来插入一个图标。你可以根据需要选择合适的图标类。

最后,我们需要将文本在顶部栏居中对齐。Bootstrap的导航栏组件默认将文本居中对齐,所以无需额外的样式。

综上所述,通过使用Bootstrap的导航栏组件和图标字体,我们可以实现图标左侧对齐,文本在顶部栏居中对齐的效果。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求快速创建、部署和扩展云服务器实例。了解更多信息,请访问腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端对象存储服务,可用于存储和管理各种类型的数据。了解更多信息,请访问腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【CSS】图片底部空白缝隙处理 ( 使用居中对齐 顶部对齐 底部对齐 | 行内元素 行内块元素转为块级元素 )

文字的基线对齐 , 上面图片与边框之间的风险 , 就是基线与底线之间的距离 ; 二、图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) ---- 使用 vertical-align...的 其它三种对齐方式 居中对齐 / 顶部对齐 / 底部对齐 , 都可以解决该问题 ; 代码示例 : <!.../ vertical-align: baseline; } .two { /* 中线对齐 - 图片中心与文字中心对齐 垂直居中*/ vertical-align: middle...; } .three { /* 顶线对齐 - 图片顶部与文字顶线对齐 顶部对齐*/ vertical-align: top; } .four { /* 底线对齐 - 图片底部与文字底线对齐...图片底部有一块缝隙 , 其它三种对齐方式底部都没有缝隙 ; 三、图片底部空白缝隙问题解决方案二 ( 行内元素 / 行内块元素转为块级元素 ) ---- 使用 vertical-align 垂直对齐

1.9K50

【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

链接中的文本 , 放在 标签中 , 该标签宽度默认充满父容器 , 高度自适应 ; 将其设置为 block 块级元素 , 就可以放置图片下方 ; 文本 span 样式为 : nav...*/ list-style: none; } img { /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */...*/ height: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中...只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } .app ul li:nth-child(3)...15 像素圆角 */ border-radius: 15px; /* 搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷 需要在父容器设置 overflow: hidden *

3.2K40

【移动端网页布局】流式布局案例 ④ ( Banner 制作 | 固定定位 | 标准流 | 百分比宽度设置 )

*/ max-width: 640px; } Banner , 只需要进行简单的标准流设置 , Banner 设置为第一个标准流图片即可 ; HTML 结构如下 : <!...*/ list-style: none; } img { /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */...*/ height: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中...只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } .app ul li:nth-child(3)...15 像素圆角 */ border-radius: 15px; /* 搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷 需要在父容器设置 overflow: hidden *

1.7K20

【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

*/ list-style: none; } img { /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */...*/ height: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中...只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } .app ul li:nth-child(3)...15 像素圆角 */ border-radius: 15px; /* 搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷 需要在父容器设置 overflow: hidden *...JD 图标的右上角 right 值为负数说明该竖线 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素 可以设置宽高 */ display

3.5K20

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

一、顶部固定定位搜索 需求 : 制作如下搜索 ; 1、固定定位盒子居中对齐 首先 , 设置固定定位 , 固定定位盒子始终显示浏览器中指定的位置 , 与父容器或其它容器无关 ; /* 固定定位盒子始终显示浏览器中指定的位置...top: 0; 再后 , 设置 left: 50% 样式 , 盒子左侧设置到中心位置 , 这个 50% 是相对于父容器的 比例 , 也就是浏览器 ; /* 固定定位的盒子页面中居中对齐..., 左侧是搜索 , 右侧是搜索按钮 ; 右侧的搜索按钮始终都是 44x44 像素大小 ; 左侧的搜索随着网页布局的宽度变化而变化 ; 此处 使用 Flex 弹性布局管理宽度 , 右侧的按钮直接设置一个固定大小...; 4、二倍精灵图设置 下图中的 放大镜图片 和 头像图标 都定义精灵图中 , 二倍精灵图设置步骤 : 缩小精灵图 : Firework 中 , 精灵图缩小一半 ; 测量坐标 : 缩小一半的精灵图中测量坐标...*/ top: 0; /* 固定定位的盒子页面中居中对齐 先将盒子左侧设置到中心位置 注意 : 这个 50% 是相对于父容器的 也就是浏览器 */

28520

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

一、搜索样式及核心要点 1、实现效果 上一篇博客中 , 完成了顶部提示 , 本篇博客开始完成下面的 搜索布局 ; 2、自动伸缩搜索实现 在上面的基础上 , 如果 缩小浏览器的宽度 , 搜索也会跟着缩小...像素的 , 计算缩放时 , 需要计算缩放比例 ; 精灵图中放大镜图标为 30 x 29 像素 , 布局中放大镜图标为 18 x 15 像素 ; 这里精灵图中的放大镜图标设置为 36 x 30 像素..., 比较好计算 ; 二倍精灵图处理方案 : Firework 中 , 精灵图缩小一半 ; 缩小一半的精灵图中测量坐标 ; 代码中的 background-size 缩小一半 , 也就是精灵图缩小一半...*/ list-style: none; } img { /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */...只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } .app ul li:nth-child(3)

2K30

【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )

*/ list-style: none; } img { /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */...*/ height: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中...只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } .app ul li:nth-child(3)...15 像素圆角 */ border-radius: 15px; /* 搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷 需要在父容器设置 overflow: hidden *...JD 图标的右上角 right 值为负数说明该竖线 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素 可以设置宽高 */ display

2.3K40

【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航 | 固定定位下面的布局设置 | 设置横向导航弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

; 该横向导航中 设置了 5 个元素 , 这里可以使用百分比布局实现 , 也可以使用 Flex 弹性布局实现 ; 父容器设置为 Flex 弹性布局 , 同时为子项目设置 flex: 1; 样式...; 二倍精灵图设置步骤 : 缩小精灵图 : Firework 中 , 精灵图缩小一半 ; 测量坐标 : 缩小一半的精灵图中测量坐标 ; 设置代码 : 代码中的 background-size...* 设置图标的样式 */ /* 图标大小为 32 x 32 像素 */ width: 32px; height: 32px; /* 设置顶部外边距 8 像素 */...*/ top: 0; /* 固定定位的盒子页面中居中对齐 先将盒子左侧设置到中心位置 注意 : 这个 50% 是相对于父容器的 也就是浏览器 */...*/ width: 44px; height: 44px; /* 设置文字大小为 12 像素 */ font-size: 12px; /* 设置文本居中 */

41820

【移动端网页布局】流式布局案例 ② ( 实现顶部固定定位提示 | 布局元素百分比设置 | 列表样式设置 | 默认样式设置 )

一、样式测量及核心要点 1、样式测量 京东手机端 https://m.jd.com/ 顶部提示 使用京东 APP 打开网页的提示 , 是通过 固定定位 放置顶部的 , 当向上滑动界面的时候 , 该...为其设置左浮动 , 可以令四个列表项水平排列 , 并且没有默认的内外边距 ; 设置其 行高 = 内容高度 = 45 像素 , 令其中的文本内容垂直居中 ; 设置其 text-align: center...样式 , 令文本水平居中 ; .app ul li { /* 设置左浮动 令列表元素水平排列 */ float: left; /* 设置高度 45 像素 = 行高 垂直居中 *...*/ text-align: center; /* 文本颜色白色 */ color: #fff; } 注意要 全局设置列表项的默认样式 , 不要内外边距 , 取消列表项的左侧小圆点默认样式...; 这里特别注意 , 默认的图片对齐方式是基线对齐 , 只要不是基线对齐 , 随便设置 顶部 / 底部 / 中部 对齐都可以实现图像居中 ; .app ul li:nth-child(1) img {

2K10

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

li { /* 列表项高度是 60 像素, 文字与顶部有 10 像素间隔 这里列表项设置成 50 像素 , 此位置直接写文字即可 多行文本无法设置居中 , 为了保证文字处于距离顶部...10 像素外边距 下面直接紧贴写文字 以达到多行文本居中对齐效果 */ margin-top: 10px; } 列表项中的三种文本 , 样式如下 : /* Banner 条右侧 课程表...10 像素间隔 这里列表项设置成 50 像素 , 此位置直接写文字即可 多行文本无法设置居中 , 为了保证文字处于距离顶部 10 像素位置 只能将列表项设置为...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器中居中对齐...10 像素间隔 这里列表项设置成 50 像素 , 此位置直接写文字即可 多行文本无法设置居中 , 为了保证文字处于距离顶部 10 像素位置 只能将列表项设置为

3.5K60

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

顶部下分类与轮播页 网页中部展示内容信息 底部的页尾 这三个大块还可以细分,顶部标题 分为 左侧站点信息、 搜侧搜索 与 发布内容区域;顶部下部分可分为 类型分类与轮播页;内容展示部分分为图片与信息以及底部的具体页尾内容...我们根据基本的 行 和 列 制作网站标题头: 我们可以看到,该标题头可以当做是两个行,左侧一个、右侧一个;在此可以者两个内容放在一个行中,这两个行的宽度各为 50%,左侧行的 水平对齐 为 左对齐,...我们选中所有的 行组件,设置他们的相同属性,步骤如下: 接下来统一选中 标题右侧 和 标题左侧,设置他们的宽度为 50%: 最后需要设置的为 标题左侧 的 水平对齐左侧对齐、右侧标题 ...水平对齐 为 右侧对齐,垂直对齐 均为 居中: 接下来 标题左侧行 中添加两个文本,修改文本属性后即可完成更改颜色: 在此你可能对该文本紧贴左侧边缘并不喜欢,可以更改该文本属性中的 左外边距...轮播页 创建文本 轮播页 作为一个容器,在其添加 行组件 命名为 轮播文本,接着 轮播文本行 中添加 文本组件 即可为这个 轮播页 完成如下效果: 此时该 轮播页 的对象树如下: 样式可以按照个人的喜好完成自己的布局

1.9K30

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

文章目录 一、网格商品展示模块盒子模型测量及样式 1、盒子尺寸测量 2、标题盒子尺寸测量和样式 3、左侧文本盒子尺寸测量和样式 4、右侧文本盒子尺寸测量和样式 二、顶部文本标题盒子代码示例 1、HTML...3、左侧文本盒子尺寸测量和样式 标题盒子判定 , 上面的标题 , 可以将其设置为 垂直居中 的样式 , 垂直居中 , 需要行高 = 内容高度 , 这里精确的测量 " 精品推荐 " 文本的行高与内容高度...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器中居中对齐...10 像素间隔 这里列表项设置成 50 像素 , 此位置直接写文字即可 多行文本无法设置居中 , 为了保证文字处于距离顶部 10 像素位置 只能将列表项设置为...以达到多行文本居中对齐效果 */ margin-top: 10px; } /* Banner 条右侧 课程表 无序列表 列表项 继续学习 文本样式 */ .course-bd li .span1

4.3K40

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

垂直对齐 拥有 4 个可选项依次为顶部居中、底部。...在此我们讲解常用的 3 个可选项顶部居中、底部: 垂直对齐 设置为 顶部,页面中的 可视对象 将会从顶部依次往下进行显示; 垂直对齐 设置为 居中,那么页面中的 可视对象 将会从页面的 垂直中部...水平对齐有 3 个对齐方式,依次是靠左、居中、靠右这三个方式: 靠左 对齐指第 1 个元素横排显示为左侧居中则在中部、靠右则在右部开始显示: 5.2 行属性 行的常用属性有以下几点: 宽度...,属性中更改文本内容即可更改显示内容: 5.3.2 最大字符数与溢出效果 文本组件 的 最大字符数 指的是文本中所能容纳的最大内容,设置最大字符数可以限定文本长度,设置为 2 则不能显示超过 2...个字符内容: 此处文本超出部分由于溢出效果为 省略号,原因是文本属性中 溢出效果 设置为 显示省略号。

4K20

二、首页影院我的 制作《仿淘票票系统前后端完全制作(除支付外)》

、标题头部制作 接着我们点击影院,发现当前页内容为空: 我们的影院页面跟首页内容类似,此时我们先复制首页的标题到影院页面: 删除右侧栏目的内容以及logo区域内容: 此时右侧添加一个下拉菜单以及一个图标...: 图标为 search: 此时你还需要更改这些图标的属性内容,使其能够大小合适与当前页面。...接着我们发现当前右边并不垂直居中,我们需要更改右侧的垂直对齐居中: 这样的话,这个标题就做完了。...,左侧是影院信息,右侧为新人价格,此时我们影院信息内部新建两个行一个是左,另一个是右,剩下的标签内容暂时先不用理: 此时宽度左侧行设置为 70%,右侧行设置为 30%,使其占据整一行:...100%,否则会超格,并且还需要使其换行为否: 接着我们再创建一个标签占满整个宽度,在里面添加一个文本即可: 文本若想使其有一定的宽度,只需要给予内边距即可: 由于需要距离顶部一定距离和左侧一定距离

83130

6详解AppBar小部件

它通常位于屏幕顶部,并且能够在其布局中包含其他小部件。AppBar 通常显示概括本页的功能模块,例如图标和标题,并且通常包含按钮或其他用户交互点。...40, child: Image.network(url), ), ), Flutter AppBar 标题图片 默认情况title下,根据 Material 指南与 AppBar 的左侧对齐...您可以更改此设置以使其居中对齐: AppBar( title: Container( width: 40, child: Image.network(url), ), centerTitle...AppBar 包含各种属性,包括颜色、大小、图标主题、文本主题等等。 背景颜色 以下代码 AppBar 的背景颜色更改为深橙色。500添加以访问颜色的特定阴影,900即最暗和最亮50。...、文本、背景、高度、阴影颜色和工具设置主题 所以我们有了!

16.3K10

【CSS】课程网站横版导航 ( 横版导航测量及样式 | 代码示例 )

先将版心的样式设置给盒子 ; /* 版心宽度 1200 像素 , 浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } 该盒子大小为 1200x60..., 都为 60 , 会自动垂直居中 , 文本大小为 16 像素 , 颜色为 #050505 ; 最终样式为 : /* 设置 竖线和课程名称所在盒子 的文本颜色 这是所有的文本样式 课程链接里面...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器中居中对齐...10 像素间隔 这里列表项设置成 50 像素 , 此位置直接写文字即可 多行文本无法设置居中 , 为了保证文字处于距离顶部 10 像素位置 只能将列表项设置为...以达到多行文本居中对齐效果 */ margin-top: 10px; } /* Banner 条右侧 课程表 无序列表 列表项 继续学习 文本样式 */ .course-bd li .span1

5.1K30

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

大盒子背景白色 */ background-color: #fff; } 3、版心盒子 版心盒子不需要进行特殊设置 , 只需要将之前定义的版心样式设置给改盒子即可 ; /* 版心宽度 1200 像素 , 浏览器中居中对齐...*/ text-align: center; /* 垂直居中对齐 - 行高 = 内容高度 */ line-height: 34px; /* 文本大小和颜色值 */ font-size: 16px...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器中居中对齐...10 像素间隔 这里列表项设置成 50 像素 , 此位置直接写文字即可 多行文本无法设置居中 , 为了保证文字处于距离顶部 10 像素位置 只能将列表项设置为...以达到多行文本居中对齐效果 */ margin-top: 10px; } /* Banner 条右侧 课程表 无序列表 列表项 继续学习 文本样式 */ .course-bd li .span1

4.1K30

【CSS】使用 固定定位 实现顶部导航 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )

一、核心要点分析 ---- 实现下图所示功能 : 上方有一个固定导航 , 水平居中设置 ; 左右两侧各一个广告 , 垂直居中设置 ; 1、顶部导航要点 顶部导航要点 : 使用固定定位 , 上边偏移设置为...; 首先 , 盒子的顶部设置到浏览器垂直中线位置 , position: fixed; /* 该盒子浏览器左侧 */ /* 上边偏移 50% 之后减去 150 居中设置 */...top: 50%; 然后 , 左侧广告高度为 300 像素 , 顶部中线位置 , 向上移动 150 像素即可使真个广告居中设置 ; /* 设置垂直居中对齐 */ margin-top:...50% 之后减去 150 居中设置 */ top: 50%; /* 左边偏移 0 紧贴左侧 */ left: 0; /* 设置垂直居中对齐 */ margin-top: -...0 紧贴左侧 */ left: 0; /* 设置垂直居中对齐 */ margin-top: -150px; /* 内容尺寸 */ width: 100px; height

2.8K50

【CSS】课程网站 Banner 制作 ① ( Banner 测量 | Banner 盒子模型代码 | 代码示例 )

, 居中对齐即可 ; Banner 条的版心尺寸为 1200 x 420 像素 , 如下图所示 : 版心左侧的 侧导航 尺寸为 190 x 420 像素 ; Banner 条版心 右侧的...样式 /* Banner 条样式 */ .banner { /* 宽度自动填充整个浏览器, 这里只设置高度 */ height: 420px; /* 背景颜色 #1c036c , 背景图片水平居中对齐...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器中居中对齐...排列 导航后面 */ float: left; /* 设置左外边距 65 像素 */ margin-left: 65px; } /* 搜索 输入框 */ .search input {...像素边框正好充满 */ height: 40px; /* 1 像素边框 */ border: 1px solid #00a4ff; /* 没有右边框 */ border-right: 0; /* 文本左侧

3.9K20

scetch入门 第2部分:文本对齐和SVG第3部分中了解如何导出文件

本部分中,我们介绍文本工具,对齐以及Sketch中使用导入的矢量图形。 文字和对齐方式 好吧,让我们打开插入菜单并写一些文字! ? 添加文字 我写了“香蕉”。...选择文本后,查看屏幕右侧的Inspector。使字体大小为36,文本对齐中心和填充颜色为白色。 ? 编辑文字 如您所见,文本不是相对于矩形居中。要解决此问题,请按住Shift并同时选择矩形和文本。...选择两个对象 接下来,找到Inspector顶部的Align按钮,然后选择下面列出的两个按钮。这些是水平对齐和垂直对齐。 ? 水平和垂直对齐 现在让我们页面的白色部分添加一些文本。...SVG拖动到画板 选中图标后,让我们屏幕左侧的“图层”菜单中进行一些调查。此SVG包含在名为“noun_59767_cc”的图层组中。...文本样式更改为粗体 是的,你猜对了!即使您只选择了一行文本,这两行文本也会更改为粗体。 你可能会看到这是怎么回事。我们将为袜子猴子图标制作第三种款式。

4K30
领券