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

如何垂直对齐一个较小的材质浮动按钮?

垂直对齐一个较小的材质浮动按钮可以通过以下步骤实现:

  1. 使用CSS设置按钮的样式:首先,为按钮添加一个类或ID,并使用CSS设置按钮的样式,包括背景颜色、边框、圆角等。例如:
代码语言:txt
复制
.button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 20px;
  right: 20px;
}
  1. 使用CSS设置按钮的垂直对齐方式:为了垂直对齐按钮,可以使用CSS的flexbox布局或者使用绝对定位。以下是两种常用的方法:
  • 使用flexbox布局:将按钮的父容器设置为flex布局,并使用align-items: center;将按钮垂直居中。例如:
代码语言:txt
复制
.container {
  display: flex;
  align-items: center;
}
  • 使用绝对定位:将按钮的父容器设置为相对定位,并使用top: 50%; transform: translateY(-50%);将按钮垂直居中。例如:
代码语言:txt
复制
.container {
  position: relative;
}

.button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
  1. 在HTML中添加按钮:在合适的位置添加按钮的HTML代码,并将按钮放置在垂直对齐的容器中。例如:
代码语言:txt
复制
<div class="container">
  <!-- 其他内容 -->
  <button class="button">按钮</button>
</div>

以上是垂直对齐一个较小的材质浮动按钮的基本步骤。根据具体的应用场景和需求,可以根据需要进行样式和布局的调整。

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

相关·内容

如何构建一个通用垂直爬虫平台?

一个爬虫很简单,写一个可持续稳定运行爬虫也不难,但如何构建一个通用化垂直爬虫平台? 这篇文章,我就来和你分享一下,一个通用垂直爬虫平台构建思路。 爬虫简介 首先介绍一下,什么是爬虫?...如何写爬虫 首先,从最简单开始,我们先了解一下如何一个爬虫? 简单爬虫 开发爬虫最快语言一般是 Python,它代码写起来非常少。我们以抓取豆瓣书籍页面为例,来写一个简单程序。...有了这些基础知识之后,我们看一个完整例子,如何抓取一个整站数据?...此时,我们迫切需要一个更好解决方案,来更好地开发爬虫,所以爬虫平台应运而生。 那么如何设计一个通用化垂直爬虫平台呢?...:如何搭建一个爬虫代理服务?

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

    */ text-align: center; /* 垂直居中对齐 - 行高 = 内容高度 */ line-height: 34px; /* 文本大小和颜色值 */ font-size: 16px...*/ text-align: center; /* 垂直居中对齐 - 行高 = 内容高度 */ line-height: 34px; /* 文本大小和颜色值 */ font-size: 16px...input { /* 设置左浮动 , 方便与右侧按钮进行排列 */ float: left; /* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */ width:...*/ text-align: center; /* 垂直对齐 - 行高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮 - 鼠标经过时样式..., 其中间隙 15 像素 228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素右边距地话 , 会导致最后一个元素掉到第二行 ,

    4.2K30

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

    ; 进入 F12 调试模式 , 使用选择工具 , 选择想要分析 https://m.jd.com/ 网页元素 , 第一个 关闭按钮 , 宽度是 8% ; LOGO 图片所在盒子 , 宽度是...4 个列表项 , 为其设置左浮动 , 可以令四个列表项水平排列 , 并且没有默认内外边距 ; 设置其 行高 = 内容高度 = 45 像素 , 令其中文本内容垂直居中 ; 设置其 text-align...*/ list-style: none; } 4、设置每个元素百分比宽度 按照下图测量内容 , 为每个元素设置其百分比宽度 , 注意最后一个红色按钮设置其红色背景 ; .app ul..., 随便设置 顶部 / 底部 / 中部 对齐都可以实现图像居中 ; .app ul li:nth-child(1) img { /* 设置关闭按钮图像宽度 该图片自动水平 / 垂直对齐 */...对齐都可以 */ vertical-align: middle; } 建议为图像设置一个总体默认样式 , 默认基线对齐是个大坑 ; img { /* 默认图片对齐方式是基线对齐 只要不是基线对齐

    2K10

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

    ; 导出切片如下 : 二、用户栏代码编写 ---- 1、HTML 结构 头像 与 名称 单独放在一个 div 盒子中 , 这两个元素都要垂直居中对齐 , 分别需要单独设置 ; 头像垂直居中对齐..., 需要使用 padding 内边距方式设置 ; 文字垂直居中对齐 , 需要使用 内容高度 = 行高 方式设置 ; 核心代码 : <!...} /* 导航栏内部 无序列表 设置左浮动 */ .nav ul li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表中链接样式 */ ....input { /* 设置左浮动 , 方便与右侧按钮进行排列 */ float: left; /* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */ width:...*/ .search button { /* 设置左浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度

    2.5K30

    【CSS3】CSS3 2D 转换 - scale 缩放 ③ ( 使用 scale 设置制作可缩放按钮案例 )

    一、需求分析 设置一个 按钮 , 默认状态下显示样式如下 : 按钮 外部 有 圆形外边框 ; 按钮文本 , 水平居中对齐 , 垂直居中对齐 ; 当鼠标移动到 按钮 上之后 , 鼠标 变为 小手...样式 , 并且 按钮 以 中心位置 为准 , 放大到原来 2 倍 ; 二、代码分析 ---- 基础布局选择 : 这里使用 ul 列表标签实现 , 如果有多个 按钮 , 可以直接将 按钮 放在 li... 浮动属性设置 : 如果将 按钮排列起来 , 需要 为 列表元素 标签 设置 浮动 属性 , /* 设置左浮动..., 令 ul 列表中 li 元素水平从左到右排列 */ float: left; 一般设置 左浮动 属性 , 整个 列表 以及 列表 元素 宽高 / 边距 需要精准计算 ,...列表也不再 垂直排列 ; /* 取消 li 样式 , 也就是列表前小圆点 */ list-style: none; 设置鼠标指针样式 : 鼠标移动到

    21410

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

    像素 ; 总体背景是白色 ; 课程表 在 版心右侧 , 可以设置成 右浮动 , 设置一个 50 像素 外上边距 ; /* Banner 条右侧 课程表盒子样式 */ .course {...*/ text-align: center; /* 垂直对齐 - 行高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮 - 鼠标经过时样式...*/ text-align: center; /* 垂直对齐 - 行高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮 - 鼠标经过时样式...input { /* 设置左浮动 , 方便与右侧按钮进行排列 */ float: left; /* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */ width:...*/ text-align: center; /* 垂直对齐 - 行高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮 - 鼠标经过时样式

    3.6K60

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

    3、左侧文本盒子尺寸测量和样式 标题盒子判定 , 上面的标题 , 可以将其设置为 垂直居中 样式 , 垂直居中 , 需要行高 = 内容高度 , 这里精确测量 " 精品推荐 " 文本行高与内容高度...*/ a { text-decoration: none; } /* 清除按钮默认样式 ( 主要是按钮自带边框 ) */ button { border: none; } /* 设置总体背景...input { /* 设置左浮动 , 方便与右侧按钮进行排列 */ float: left; /* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */ width:...*/ .search button { /* 设置左浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度...*/ text-align: center; /* 垂直对齐 - 行高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮 - 鼠标经过时样式

    4.3K40

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

    , 放置在 单独 标签中 , 每个 标签中放置一个 链接标签 , 在 链接标签中包裹一个 图片 ; <!..., 三个链接图片水平排列在一起 , 并且中间没有缝隙 , 说明这是使用 浮动 进行设置 , 为父容器三个子元素都设置 左浮动 , 就可以实现上述效果 ; 设置浮动后 , 还需要设置子元素宽度 ,...如果子元素横向累加宽度超过 当前宽度 , 会自动换行 , 因此这里为每个子元素设置一个 1/3 宽度 , 即 33.33% ; 子元素 设置浮动和宽度样式如下 : .brand div...默认图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } a { /*...垂直对齐 */ width: 10px; } .app ul li:nth-child(2) { /* 设置 Logo 宽度 10% */ width: 10%; } .app

    3.5K20

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

    该大盒子 , 可以分为如下三个小盒子 , 小盒子中元素都是垂直居中 , 可以在大盒子中设置一个行高 , 小盒子自动继承 ; font-xxx , line-xxx , text-xxx , color...*/ a { text-decoration: none; } /* 清除按钮默认样式 ( 主要是按钮自带边框 ) */ button { border: none; } /* 设置总体背景...input { /* 设置左浮动 , 方便与右侧按钮进行排列 */ float: left; /* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */ width:...*/ .search button { /* 设置左浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度...*/ text-align: center; /* 垂直对齐 - 行高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮 - 鼠标经过时样式

    5.2K30

    一文掌握css常见布局float、position、flex、grid

    脱离文档流设置了float属性元素跟绝对定位一样,脱离了文档流,对于一个父元素中只有一个或多个有浮动属性元素,父元素会产生塌陷效果,这时一定要留意不要有让父元素高度自适应想法:浮动实现横向导航目前浮动常见用法便是配个...,通过用来我们需要将某个子元素在父元素固定位置显示,比如实现窗口关闭按钮这种场景。...:row: 水平方向从左到右,也是默认值;jinan-jaeger.jwswxz.com: 水平方向从右到左;column: 垂直方向从上到下;column:垂直方向从下到上;我们在看一个垂直方向从下到上例子...定义了项目在纵坐标的对其方式,主要用于当项目的高度不一致时候如何显示,有以下几个值:flex-start: 顶部对齐flex-end: 顶部对齐center: 居中对齐baseline: 项目的第一行文字基线对齐...item宽度项目属性 flex-grow定义了剩余空间如何利用,常用来当固定宽度几个元素没有占满整个容器,然后剩余宽度都由一个元素占满。

    17810

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

    ( 主要是按钮自带边框 ) */ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度...*/ float: left; /* 设置与 导航栏盒子 外边距 */ margin-right: 60px; } /* 导航栏设置 左浮动 */ .nav { float: left;...} /* 导航栏内部 无序列表 设置左浮动 */ .nav ul li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表中链接样式 */ ....input { /* 设置左浮动 , 方便与右侧按钮进行排列 */ float: left; /* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */ width:...*/ .search button { /* 设置左浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度

    3.9K20

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

    , 宁可少 1 像素 , 也不能多 1 像素 , 如果设置浮动后 , 宽度超过了布局宽度 , 则会自动换行 ; 3、设置浮动及宽度 该布局距离上面的布局有 5 像素上外边距 ; 如果要令 10 个坐标..., 水平排成两排 , 每排 5 个 , 为其设置左浮动即可实现 , 同事设置其宽度为 20 像素 ; 除了图片外 , 每个链接中还有一行文字 , 设置文字水平对对齐 nav { /* 整个导航布局距离顶部...默认图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } a { /*...垂直对齐 */ width: 10px; } .app ul li:nth-child(2) { /* 设置 Logo 宽度 10% */ width: 10%; } .app...*/ width: 30px; /* 默认图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align

    3.3K40

    IT课程 CSS基础 028_浮动、定位、对齐

    浮动 在 CSS 中,浮动是一种布局技术,通过 float 属性来使元素在页面中沿着容器左侧或右侧浮动,使得其他元素能够环绕它。...静态定位元素在文档流中正常排列,不受 top、right、bottom、left 属性影响。 初始定位 initial 在 CSS 中,initial 是一个用于将属性值重置为其初始值关键字。...它决定了一个元素在垂直堆叠上显示顺序,即哪个元素会在哪个元素前面或后面。 z-index 值可以是负数。 z-index 较大元素将覆盖较小元素。...CSS 对齐是指通过 CSS 属性来控制元素水平和垂直对齐方式。... 效果: 垂直对齐 vertical-align 用于设置元素内部行内元素在垂直方向上对齐方式。通常用于行内元素,对块级元素没有直接影响。

    11710

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

    */ max-width: 640px; } Banner 栏 , 只需要进行简单标准流设置 , 将 Banner 栏设置为第一个标准流图片即可 ; HTML 结构如下 : <!...默认图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } a { /*.../* 清除浮动固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content: ""; display: block...垂直对齐 */ width: 10px; } .app ul li:nth-child(2) { /* 设置 Logo 宽度 10% */ width: 10%; } .app...*/ width: 30px; /* 默认图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align

    1.7K20

    【热点盘点】iOS 8增强自动布局功能

    ,子节点控件高度占父容器高度多大比例;对于兄弟关系UI控件而言,自动布局可控制兄弟UI控件左边界、右边界、上边界、下边界对齐,也可控制兄弟UI控件之间高度比例、宽度比例,还可控制它们之间间距…...单击第一个按钮即可弹出图中浮动框,该浮动框与Align子菜单包含菜单项完全一样,只是通过该按钮可以同时添加多个约束。...点击InterfaceBuilder右下角第二个按钮,打开浮动框与Pin子菜单包含菜单项完全一样,只是可以同时添加多个约束。...InterfaceBuilder右下角第三个按钮对应浮动框与Resolve Auto Layout Issues子菜单包含菜单项完全一样。...由于在界面上拖出蓝线为斜线,因此弹出菜单既可设置两个UI控件在水平方向上相对布局关系,也可设置在垂直方向上相对布局关系。如果在界面上拖出蓝线为垂直竖线,那么Xcode将弹出如下图所示菜单。

    1.2K10

    【软件开发规范七】《Android UI设计规范》

    浮动按钮(Raised button), 常见方形纸片按钮,点击后会产生墨水扩散效果。 扁平按钮(Flat button), 点击后产生墨水扩散效果,和浮动按钮区别是没有浮起效果。 ​...编辑 悬浮响应按钮 ​编辑 浮动按钮 ​编辑 扁平按钮 ​编辑 最重要且随处用到操作,建议使用悬浮按钮。信息较多时,选用凸起按钮可以有效突出重要操作,但注意纸片不要叠太多层。...次要内容可以是一个动作按钮或者文本。 ​编辑 为瓦片内容提供一个默认图片。 网格只能垂直滚动。单个瓦片不支持滑动手势,也不鼓励使用拖放操作。 网格中单元格间距是2dp或8dp。...列表(Lists) ​编辑 列表作为一个单一连续元素来以垂直排列方式显示多行条目。 列表由单一连续列构成,该列又等分成相同宽度称为行(rows)子部分。行是瓦片(tiles)容器。...编辑 滚动时,如果列表较长,小标题会固定在顶部,直到下一个小标题将它顶上去。 ​编辑 存在浮动按钮时,小标题要让出位置,与文字对齐。 ​

    5K20
    领券