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

在MaterializeCSS导航栏中将material_icon垂直居中?

在MaterializeCSS导航栏中将material_icon垂直居中,可以通过以下步骤实现:

  1. 首先,确保你已经引入了MaterializeCSS的样式文件和相关的JavaScript文件。
  2. 在HTML文件中,找到导航栏的代码块,通常是一个<nav>标签。
  3. 在导航栏中,找到包含material_icon的元素,通常是一个<i>标签。
  4. 给该<i>标签添加一个自定义的类名,例如vertical-align
  5. 在CSS文件中,使用该自定义类名来定义垂直居中的样式。可以使用flex布局来实现垂直居中,具体代码如下:
代码语言:css
复制
.vertical-align {
  display: flex;
  align-items: center;
}
  1. 保存并刷新页面,你将看到material_icon已经垂直居中显示在导航栏中。

MaterializeCSS是一款基于Material Design风格的前端框架,它提供了丰富的组件和样式,可以快速构建现代化的网页界面。导航栏是网页中常见的组件之一,用于导航和展示网站的主要功能。

垂直居中是一种常见的布局需求,通过使用flex布局,我们可以轻松实现元素的垂直居中。MaterializeCSS提供了一系列的CSS类和样式,可以帮助我们快速实现各种布局效果。

腾讯云提供了一系列的云计算产品,包括云服务器、云数据库、云存储等,可以满足不同场景下的需求。你可以访问腾讯云官方网站了解更多产品信息:腾讯云

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

相关·内容

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

一、核心要点分析 ---- 实现下图所示功能 : 上方有一个固定导航栏 , 水平居中设置 ; 左右两侧各一个广告栏 , 垂直居中设置 ; 1、顶部导航栏要点 顶部导航栏要点 : 使用固定定位 , 上边偏移设置为...0 , 即可设置为顶部导航栏 , 其位置不受页面滚动影响 ; /* 设置固定定位 */ position: fixed; top: 0; 由于顶部的导航栏设置了 绝对定位 , 该元素是脱标的...*/ text-align: center; /* 该盒子位于最上层 不要被其它盒子覆盖 */ z-index: 3; } 2、固定定位垂直居中设置 设置左右两侧的广告栏在浏览器中垂直居中设置...; 首先 , 将盒子的顶部设置到浏览器垂直中线位置 , position: fixed; /* 该盒子在浏览器左侧 */ /* 上边偏移 50% 之后减去 150 居中设置 */...top: 50%; 然后 , 左侧广告栏高度为 300 像素 , 顶部在中线位置 , 向上移动 150 像素即可使真个广告栏居中设置 ; /* 设置垂直居中对齐 */ margin-top:

3.1K50
  • 【CSS】课程网站头部制作 ⑤ ( 用户栏测量 | 用户栏代码编写 | 代码示例 )

    ; 导出的切片如下 : 二、用户栏代码编写 ---- 1、HTML 结构 头像 与 名称 单独放在一个 div 盒子中 , 这两个元素都要垂直居中对齐 , 分别需要单独设置 ; 头像垂直居中对齐...放置在一行 ; 然后 , 设置用户栏头像 盒子样式 , 为其设置 6 像素 上下内边距 , 使得头像图片垂直居中 ; 整体 用户栏盒子 高度 42 像素 ; 头像图片宽高均为 30 像素 ; 头像.../* 用户栏盒子 */ .user { float: left; /* 高度 = 行高 垂直居中 */ height: 42px; line-height: 42px; /* 距离左侧 30...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 在浏览器中居中对齐...排列在 导航栏后面 */ float: left; /* 设置左外边距 65 像素 */ margin-left: 65px; } /* 搜索栏 输入框 */ .search input {

    2.5K30

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

    标题盒子判定 , 上面的标题 , 可以将其设置为 垂直居中 的样式 , 垂直居中 , 需要行高 = 内容高度 , 这里精确的测量 " 精品推荐 " 文本的行高与内容高度 ; 该文本盒子如下图所示 ,...像素 */ .box { margin-top: 15px; } /* 文本部分 设置垂直居中 */ .box-hd { /* 内容高度 = 行高, 垂直居中 */ height: 60px;...排列在 导航栏后面 */ float: left; /* 设置左外边距 65 像素 */ margin-left: 65px; } /* 搜索栏 输入框 */ .search input {...中 无序列表 列表项 高度 45 像素 */ .subnav li { /* 高度 = 行高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航栏...15 像素 */ .box { margin-top: 15px; } /* 文本部分 设置垂直居中 */ .box-hd { /* 内容高度 = 行高, 垂直居中 */ height: 60px

    4.3K40

    【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )

    无序列表 列表项 高度 45 像素 */ .subnav li { /* 高度 = 行高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航栏...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 在浏览器中居中对齐...排列在 导航栏后面 */ float: left; /* 设置左外边距 65 像素 */ margin-left: 65px; } /* 搜索栏 输入框 */ .search input {...*/ .user { float: left; /* 高度 = 行高 垂直居中 */ height: 42px; line-height: 42px; /* 距离左侧 30 像素 左外边距...中 无序列表 列表项 高度 45 像素 */ .subnav li { /* 高度 = 行高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航栏

    3.3K50

    实战 HTML & CSS:如何快速搭建一个响应式博客首页

    ; /* 导航栏背景颜色设置为淡玉米花蓝 */ height: 40px; /* 导航栏高度设置为40像素 */ text-align: center; /* 导航栏内文本水平对齐方式设置为居中...*/ align-content: center; /* 导航栏内内容的垂直对齐方式设置为居中 */ position: fixed; /* 导航栏的位置属性设置为固定...,以便在页面滚动时保持在原位置 */ top: 0; /* 导航栏距离页面顶部的距离为0像素 */ left: 0; /* 导航栏距离页面左边的距离为0像素 */...完善样式 参考预期的效果,关于核心内容目前还缺少的样式如下: 右侧广告栏,固定展示位置,不管文章列表如何滚动,始终固定显示在页面上; 右侧广告栏的内容居中展示; 各种边框阴影效果等; .content...align-content: center; /* 导航栏内内容的垂直对齐方式设置为居中 */ position: fixed; /* 导航栏的位置属性设置为固定,以便在页面滚动时保持在原位置

    14810

    【CSS】课程网站头部制作 ② ( 导航栏测量 | 导航栏编写 | 代码示例 )

    标签结构 2、 CSS 样式 一、 导航栏测量 ---- 1、 左侧边界 导航栏 最左侧位置 , 距离 logo 盒子 有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子 与 导航栏之间的距离设置成...垂直排列 , 且左侧有小圆点 ; 先清除默认的列表样式 : /* 清除列表默认样式 ( 主要是前面的点 ) */ li { list-style: none; } 导航栏要设置左浮动 , 才能与 logo...上下内边距 0 像素 , 左右内边距 10 像素 */ padding: 0 10px; /* 右外边距 20 像素 */ margin-right: 20px; /* 行高 = 内容高度 垂直居中...设置总体背景 */ body { background-color: #f3f5f7; } /* 插入图片自适应 */ img { width: 100%; } /* 版心宽度 1200 像素 , 在浏览器中居中对齐...上下内边距 0 像素 , 左右内边距 10 像素 */ padding: 0 10px; /* 右外边距 20 像素 */ margin-right: 20px; /* 行高 = 内容高度 垂直居中

    3.9K20

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

    , 居中对齐即可 ; Banner 条的版心尺寸为 1200 x 420 像素 , 如下图所示 : 版心左侧的 侧导航栏 尺寸为 190 x 420 像素 ; Banner 条版心 右侧的...上下内边距 0 像素 , 左右内边距 10 像素 */ padding: 0 10px; /* 右外边距 20 像素 */ margin-right: 20px; /* 行高 = 内容高度 垂直居中...排列在 导航栏后面 */ float: left; /* 设置左外边距 65 像素 */ margin-left: 65px; } /* 搜索栏 输入框 */ .search input {...*/ .user { float: left; /* 高度 = 行高 垂直居中 */ height: 42px; line-height: 42px; /* 距离左侧 30 像素 左外边距...头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素 容器高 42 上下各 6 像素边距 图像垂直居中 */ padding: 6px 0;

    3.9K20

    常见 css 布局整理

    常用 css 布局学习整理 一、垂直居中 二、等分布局 三、等高布局 四、多列布局 五、局中布局(垂直居中) 六、全屏布局 七、三列布局 八、圣杯布局 九、双飞翼布局 十、水平居中 十一、css 布局特别整理...11.1 快速制作一行底部导航栏 注意: 代码里面都有比较详细的注释 项目代码全部已经上传至 码云 和 Github,两个仓库我会同步更新 码云 git 下载地址:git@gitee.com:gorit...有父容器和子容器,实现子容器在父容器中的居中效果 布局效果: 二、等分布局 实现一行元素,在等高,等宽的情况下,在游览器汇总均匀排布 布局效果 三、等高布局 两列在同一级的 div 元素,实现等高等宽效果...布局效果 四、多列布局 多列布局实现 (等宽,非等宽,有间隙) 布局效果 自适应的效果不方便展示,可以在代码中查看 五、局中布局(垂直居中) 两个 div 元素,小盒子在 大盒子上下,左右都在中间...元素在水平内部居中效果实现 布局效果 十一、css 布局特别整理 11.1 快速制作一行底部导航栏 html 首页a><a href

    53110

    【CSS】标签显示模式 ④ ( 标签显示模式示例 | 设置行内元素宽高 | 设置鼠标经过样式 | 设置文字水平居中 | 设置文字垂直居中 | 文本行高与盒子高度关系 )

    文章目录 一、标签显示模式示例 1、基本结构 2、设置行内元素宽高 3、设置元素背景 4、设置文字水平居中 5、取消链接文字下划线装饰 6、设置鼠标经过样式 二、文字垂直居中 1、行高测量 2、垂直居中设置...3、文本行高与盒子高度关系 三、完整代码示例 代码示例 显示效果 一、标签显示模式示例 ---- 实现 横向导航栏 , 要求如下 : 每个导航按钮都有指定的宽高 , 有默认背景 , 鼠标移动上去背景和文字都会改变...---- 在 CSS 中没有文字垂直居中的 设置 , 需要结合 行高 和 元素高度 进行设置 ; 1、行高测量 单行文字显示 , 存在四条线 : 顶线 : 文字上边界 ; 中线 : 文字中间线 ; 基线..., 就可以令文字垂直居中 ; /* I....DOCTYPE html> 横向导航栏 <base

    4.1K40

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

    下面的横向导航栏 , 高度为 64 像素 , 同时该父容器是一个圆角矩形 , 圆角半径为 8 像素 ; 该导航栏 上下各有 3 像素的外边距 , 左右各有 4 像素的外边距 ; 导航栏整体背景为白色...; 在该横向导航栏中 设置了 5 个元素 , 这里可以使用百分比布局实现 , 也可以使用 Flex 弹性布局实现 ; 将父容器设置为 Flex 弹性布局 , 同时为子项目设置 flex: 1; 样式..., 这样 5 个子项目平均分配整个宽度尺寸 ; 样式代码 : /* 横向导航栏样式 */ .local-nav { /* 横向导航栏的父容器布局 */ /* 设置为 Flex 弹性布局...搜索框样式 */ /* 子绝父相 放大镜图标子元素设置绝对定位 父容器需要设置相对定位 */ position: relative; /* 设置 高度 = 26 行高 = 24 像素 垂直居中...设置行高 = 26 会偏下 上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中

    58520

    自定义View:手撸一个带FAB凹槽的底部导航栏

    设计思路 既然玩那就干脆玩花一点,一步到位给中间按钮加了个简单的点击动画,点击后FAB在垂直方向上执行一次往返位移,同时底部导航栏上的凹槽大小跟随着FAB的凹陷深度动态变化,需要实现的功能点以及思路大体是下面的几个...Activity后界面默认是这样子的效果: 接下来就是根据需求在小细节上修修补补了,由于只需要显示两个导航item,另外需要在导航栏的中间给大按钮预留个空位,于是在导航栏的menu文件中将中间item的图标和文字都去掉...导航栏中间大按钮停靠 在之前已经在导航栏上留好了放置大按钮的位置,接下来就是想办法把这个按钮塞进去,并且设置按钮的中心点与导航栏的顶部居中对齐。...只不过这看似挺简单的效果,设计路径和计算相关尺寸大小实践起来还是挺麻烦的,在废弃了n种方案之后决定出采用以下的一种: 如上图所示,橙色实线为底部导航栏的目标形状,canvas的绘制原点默认在左上角,整个形状的直线部分路径比较好确定...假设按钮在垂直方向上的当前位移距离大小为d,当按钮向上运动时导航栏上的凹槽应该往中间收缩,在收缩过程中保持两旁小圆半径大小和30°夹角不变,这时另中间圆的圆心同步在垂直方向上移动-d,动态修改distance

    26110

    Framer 使用滚动变体创建动画

    您可以使用“滚动变体”使导航栏在用户向下滚动页面时更改其外观,例如更改其背景颜色或调整元素的位置。或者在向下滚动页面时突出显示活动部分的侧边栏。...Demo1: 实现一个滚动到不同部分,修改导航栏的背景颜色的效果 创建导航栏组件 第一步就是创建一个导航栏组件 可以直接按下命令 K 并调出快捷菜单。...然后输入组件名字,就可以进入到组件编辑页面了 然后我们创建一个最基本的导航栏(默认) 左边放入LOGO 右边放入包裹每一菜单项的大盒子 也就是导航栏 采用flex布局, 子项y方向垂直居中, x方向左右两端分布..., 左右两边加入内边距padding 每一项的item 也是flex伸缩盒布局, 子项垂直水平居中 紧接着我们复制这个组件两份,分别修改背景颜色为黑色 和黄色 最终效果: 然后我们组件就完成了,...当黑色部分在浏览器视口中,导航栏使用默认的组件 当白色部分在浏览器视口中,导航栏使用黑色背景的导航栏组件 当黄色部分在浏览器视口中,导航栏使用黄色背景的导航栏组件 效果: 我们可以看到 当滚动不到不同部分的时候

    10010
    领券