开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

与bootstrap4按钮垂直对齐作为锚点[复制]

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。Bootstrap 4 提供了许多预定义的 CSS 类和组件，以简化网页设计和开发。按钮（Buttons）是 Bootstrap 中的一个基本组件，可以通过各种类来定制其样式和行为。

相关优势

响应式设计：Bootstrap 的按钮在不同设备上都能保持良好的显示效果。
易于定制：通过添加不同的类，可以轻松改变按钮的样式、大小和颜色。
一致性：使用 Bootstrap 可以确保整个网站的按钮样式一致。

类型

Bootstrap 4 中的按钮有多种类型，包括：

默认按钮：class="btn btn-primary"
成功按钮：class="btn btn-success"
警告按钮：class="btn btn-warning"
危险按钮：class="btn btn-danger"
信息按钮：class="btn btn-info"
链接按钮：class="btn btn-link"

应用场景

按钮广泛应用于各种网页元素，如表单提交、链接跳转、操作确认等。

垂直对齐作为锚点

要将 Bootstrap 4 按钮垂直对齐作为锚点，可以使用 Bootstrap 的网格系统（Grid System）和定位（Positioning）类。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Button Vertical Align</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .anchor-container {
      position: relative;
      height: 200px; /* 设置一个固定高度 */
    }
    .anchor-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3 anchor-container">
        <a href="#section1" class="btn btn-primary anchor-button">Click Me</a>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

解释

容器（.anchor-container）：设置一个相对定位的容器，并给定一个固定高度。
按钮（.anchor-button）：设置按钮为绝对定位，并通过 top: 50% 和 transform: translateY(-50%) 实现垂直居中对齐。

参考链接

通过这种方式，你可以轻松地将 Bootstrap 4 按钮垂直对齐作为锚点，提升用户体验和页面设计的美观性。

相关搜索:Bootstrap4:底部垂直对齐按钮将按钮与浮动文本垂直对齐将按钮与文本区域垂直对齐如何将下拉按钮与导航按钮垂直对齐将输入与标签对齐到不带标签的按钮(垂直)在React Material-UI中将按钮与TextField垂直对齐如何将单选按钮与html中的图像垂直对齐？单选按钮内部垂直对齐点(内容\00B7)不起作用如何将按钮与h3标记的右侧对齐并使它们保持垂直对齐？文本与表格中的一系列单选按钮的垂直对齐包含锚点时，无法将文本与无序列表自定义项目符号对齐 matplotlib刻度线标签锚点--右对齐刻度线标签(在右侧轴上)，并将刻度线标签的左(西)侧与轴“剪裁”。

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HarmonyOS 开发实践——相对布局 RelativeContainer

对于图片组件：相对于 RelativeContainer 在中心位置且垂直方向上有一定的偏移量。对于左侧按钮组件，相对于图片水平方向上左侧对齐，具有一定间隔。...对于右侧按钮组件，相对于图片水平方向上右侧对齐，具有一定间隔。...同方向上两个以上位置设置锚点，但锚点位置逆序时此子组件大小为 0，即不绘制。然后我们对图片组件设置偏移如.offset({ x: 0, y: -50 })即可实现我们想要的效果。...在使用锚点时要注意子元素的相对位置关系，避免出现错位或遮挡的情况。关于对齐位置，依照文档中所给示例图，可以比较直观的感受。...对于组件的尺寸，若子组件某个方向上设置两个或以上 alignRules 时最好不设置此方向尺寸大小，否则对齐规则确定的组件尺寸与开发者设置的尺寸可能产生冲突。

662 0

鸿蒙应用开发-初见：ArkUI

，第一个元素与行首对齐，同时后续的元素与前一个对齐justifyContent(FlexAlign.Center)：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同justifyContent...，覆盖Flex布局容器中alignItems配置相对布局（RelativeContainer）相对布局可以让子元素指定兄弟元素或父容器作为锚点，基于锚点做位置布局必须为RelativeContainer...及其子元素设置ID，用于指定锚点信息。...，竖直方向顶头对齐 middle: { anchor: '__container__', align: HorizontalAlign.Center } //以父容器为锚点，水平方向居中对齐...，竖直方向低端对齐 left: { anchor: 'row1', align: HorizontalAlign.Start } //以row1组件为锚点，水平方向开头对齐

2491 0

代码实验室--带你一步步理解使用 ConstraintLayout

约束约束帮助你保持控件对齐. 你可以使用锚点(比如下图展示的约束手柄)来确定各控件之间的对齐规则....这种手柄在此 codelab 中也被称作锚点. 基准线约束手柄: 基准线约束 handle 帮助你对齐两个控件的文本区域, 与控件尺寸无关....在你想使用两个不同大小的控件同时又想保持其中文字对齐的时候很有帮助. 约束系统的规则除了以下情况外, 布局中控件的锚点可以连接到其它控件的任意锚点....不同轴上的锚点, 例如左边和上边的锚点不能相连....为了实现, 我们可以如下所示创建一个 TextView 上锚点和 ImageView 底锚点之间的约束. 删除约束使用这个显示在布局中的删除约束按钮以删除选中控件上的所有约束.

2.7K6 0

开心档-软件开发入门之Bootstrap4 下拉菜单

Bootstrap4 下拉菜单 Bootstrap4 下拉菜单依赖于 popper.min.js。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。...我们可以使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。...dropdown-header 类用于在下拉菜单中添加标题：实例 Dropdown header 1 ---- 下拉菜单中的可用项与禁用项...href="#">Active Disabled ---- 下拉菜单的定位如果我们想让下拉菜单右对齐...dropdown-item" href="#">Tablet Smartphone 垂直按钮组带下拉菜单

7041 0

unity3d-UGUI

而UGUI没有图集的概念，可以充分利用资源，避免重复资源 UGUI出现了锚点的概念，更方便屏幕自适应 NGUI支持图文混排，UGUI暂未发现支持此功能 UGUI没有UIWrap来循环scrollview...属性 Pos：控件轴心点相对于自身锚点的位置。 Anchor锚点：UI元素的四个顶点与锚点的间距保持不变。锚点总是相对于父级，不能超越父物体范围。...表示点 -> PosX PosY Width Hight 表示拉伸 -> Left Right Top Bottom Pivot 轴心点：移动，旋转与缩放都围绕轴心点发生变化，0，0为左下顶点，1，1...Horizontal/Vertical Overflow：水平/垂直溢出 Best Fit：大小自适应范围在Min Size与Max Size之间 Color：颜色 Material：材质富文本语法...Automatic 自动导航 Explicit 显示导航 Visualize 可视化-显示导航路径制作按钮使用Image或Text制作Button按钮Toggle(开关) 属性 Is On 复选框的选中状态

2.9K3 0

Unity3D关于Text方面的类

TextAlignment 多行文本应该如何被对齐这个是被GUIText.alignment属性使用参见：GUI Text component 值 Left 文本行左对齐 Center 文本行居中对齐...Right 文本行右对齐 TextAnchor 文本的锚点被放置在什么位置这个是被GUIText.anchor属性使用参见：GUI Text component 值 UpperLeft...文本被锚点在左上角 UpperCenter 文本被锚点在上边，垂直居中 UpperRight 文本被锚点在右上角 MiddleLeft 文本被锚点在左边，垂直居中 MiddleCenter 文本在水平和垂直方向上居中...MiddleRight 文本被锚点在右边，垂直居中 LowerLeft 文本被锚点在左下角 LowerCenter 文本被锚点在下边，垂直居中 LowerRight 文本被锚点在右上角 TextClipping

1.2K2 0

2023 年了解即将推出的 CSS 功能

Developers.chrome.com 的另一个示例使用锚点定位来跟踪聚焦输入字段的视觉指示器。正如你所看到的，锚点可以处理多个位置和布局。...CSS 锚点定位使用场景当用户向下滚动页面时跟随用户的元素。当用户单击按钮时展开和折叠的手风琴。根据多个锚点位置调整图像大小显示在页面其余部分的模式对话框。...滚动对齐：新的 scroll-snap-align 属性允许你控制元素在对齐到对齐位置时的对齐方式。例如，你可以使用此属性来确保元素始终与滚动容器的顶部、底部、中心或左/右对齐。...，以将网格与父网格对齐： .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr...在此示例中，子网格在水平轴和垂直轴上都与父网格对齐。子网格的一个缺点是：它们很难调试。如果它们变得难以调试：使用网格检查器来可视化布局。在检查器面板中，你将看到许多不同的选项卡。

2623 0

HTML笔记

主目录次目录链接标签指定链接地址 <a...cellspacing="单元格间距值" cellpadding="单元格补白值"> 标题表头 <input type="reset" name..." marginwidth="水平边距" marginheight="<em>垂直</em>边距" srcolling="是否需要滚动条">

1.5K2 0

ArkUI常用布局：构建响应式和高效的用户界面

在HarmonyOS应用开发中，ArkUI作为用户界面开发框架，提供了多种布局方式来帮助开发者构建响应式和高效的用户界面。...线性布局（Row/Column）线性布局是最基本的布局方式之一，它控制子元素在线性方向上（水平或垂直）依次排列。Row用于水平排列，而Column用于垂直排列。...层叠布局（Stack）层叠布局通过Stack容器组件实现位置的固定定位与层叠，后一个子元素覆盖前一个子元素。这种布局适用于需要重叠元素的场景，如背景图和前景内容的叠加。...弹性布局（Flex）弹性布局提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。Flex布局在处理复杂页面布局时非常有用。...子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。

270 0

HTML笔记

href=”1.zip”>点我下载 2.电子邮件链接联系我们 3.锚点就是网页中的一个记号...实现步骤：第一步：定义锚点方式一：使用任意标签的id属性定义锚点化妆品区域方式二：使用a标签的name属性，定义锚点化妆品区域... 第二步：链接到锚点化妆品 4、返回顶部返回顶部块级元素和行内元素块级元素在网页中独占一行，可以设置宽高比如<...cellpadding 设置单元格的内边距，就是单元格与内容的距离 tr的属性： align 设置当前行里面内容的水平对齐方式取值：left/center/right valign 设置当前行里面内容的垂直对齐方式...reset 重置按钮 radio 单选框(单选框需要分组才能使用使用name属性分组，让两个单选框的name值一致即可) checkbox 多选框 file 文件选择框(用于上传文件) value

2.3K3 0

提高效率 |ArcGIS Pro 中所有快捷键一网打尽

在“随沿要素”模式下，更改注记要素与边界要素之间的距离。 O 随沿要素选项在“随沿要素”模式下，更改文本对齐、放置约束和其他注记选项的设置。...创建椭圆的第一个点，按键盘快捷键，然后拖动。创建矩形用于矩形构造工具的键盘快捷键键盘快捷键操作注释选项卡打开或关闭水平/网格对齐。打开后，以 90 度角将要素约束为垂直或水平。...Ctrl + 下箭头将观察点向场景照相机的方向移动。 Ctrl + 右箭头向右移动观察点，使之与场景照相机的朝向垂直。 Ctrl + 左箭头向左移动观察点，使之与场景照相机的朝向垂直。...Ctrl + Shift + 右箭头向右移动观察点及其目标，使之与场景照相机的朝向垂直。 Ctrl+Shift+Left 向左移动观察点及其目标，使之与场景照相机的朝向垂直。...Ctrl + 下箭头向后移动观察点。 Ctrl + 右箭头向右移动视域，使之与观察点的朝向垂直。 Ctrl + 左箭头向左移动视域，使之与观察点的朝向垂直。 Ctrl+U 增大观察点高程。

1.1K2 0

基于JS实现回到页面顶部的五种写法(从实现到增强)

写法【1】锚点　　使用锚点链接是一种简单的返回顶部的功能实现。...该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置　　[注意]关于锚点的详细信息移步至此 <body style="...元素未滚动时，scrollTop的值为0，如果元素被<em>垂直</em>滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度　　由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能...如果为true，表示元素的顶部<em>与</em>当前区域的可见部分的顶部<em>对齐</em>（前提是当前区域可滚动）；如果为false，表示元素的底部<em>与</em>当前区域的可见部分的尾部<em>对齐</em>（前提是当前区域可滚动）。...如果没有提供该参数，默认为true 　　使用该方法的原理<em>与</em>使用<em>锚</em><em>点</em>的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部<em>按钮</em>，使目标元素重新回到原来位置，则达到预期效果

5.4K2 1

thinker系列教程|thinker的几种布局方式

先说下学了这套教程咱们的目标是什么，首先我们要学的是一套python的自带UI库，具有跨平台特质，可以在Windows与Mac乃至Linux平台的界面端都能通用，没有移植成本，并且上手的门槛低。...后面为了适应微信公众号的阅读，我会将所有的知识点拆开一次讲一点，确保在五分钟内,一学就会。不对阅读造成负担。...如果你对python有一些语法上的困扰，我推荐你阅读 Hello Python 1 与 Hello Python 2 那么现在开始我们的主题。...fill：指定部件是否填充父容器的剩余空间，可以是 “x”（水平填充）、”y”（垂直填充）或 “both”（水平和垂直填充）。...anchor：指定部件的锚点，即部件相对于其位置的对齐方式，可以是 “n”（北，即上）、”s”（南，即下）、”e”（东，即右）、”w”（西，即左）、”nw”（西北）、”ne”（东北）、”sw”（西南）、

791 0

平面设计师必备的AI快捷键

一、原位粘贴技巧 CTRL+C 复制 CTRL+F 原位贴到前面 CTRL+B 原位贴到后面二、页面切换技巧在开多个AI文档的情况下。...五、文字工具的垂直方式选中文字工具时，按SHIFT点一下便是垂直输入。...得到一个和页面一样大小的框十一、工具箱多种工具共用一个快捷键的可同时按【Shift】加此快捷键选取,当按下【CapsLock】键时，可直接用此快捷键切换移动工具【V】直接选取工具、组选取工具【A】钢笔、添加锚点...、删除锚点、改变路径角度【P】添加锚点工具【+】删除锚点工具【-】文字、区域文字、路径文字、竖向文字、竖向区域文字、竖向路径文字【T】椭圆、多边形、星形、螺旋形【L】增加边数、倒角半径及螺旋圈数...隐藏所选物体【Ctrl】+【3】隐藏没有选择的物体【Ctrl】+【Alt】+【Shift】+【3】显示所有已隐藏的物体【Ctrl】+【Alt】+【3】联接断开的路径【Ctrl】+【J】对齐路径点

2.5K2 0

HTML 基础

上下会有垂直的空白 15. 段落元素 (1). 水平对齐 (2). 特点 ①. 垂直空白 ②. 独占一行 16. 或强制换行 17...._blank 在新标签页中，打开新网页 (3). name 定义页面锚点 (4). 链接的表现形式 ①. 资源下载链接地址为 **.zip 或**.rar ②....锚点(Anchor)，在 html 文档的某行位置处做一个记号，允许通过超链接跳转到该记号位置处 (1). 定义锚点(做记号) ①....链接到锚点(跳转到锚点处) ①. ②. 27.... 定义单元格 (1). align 水平对齐 (2). valign 垂直对齐 (3). width 宽度 (4). height 高度 (5). colspan 设置单元格的跨列 (

4.2K1 0

API 23 widget.RelativeLayout.LayoutParams——属性分析

android:layout_alignWithParentIfMissing 属性说明：如果设置为true，则当无法找到layout_toLeftOf，layout_toRightOf等的锚点时，父对象将用作锚点...android：layout_alignTop 属性说明：使此视图的顶部边缘与给定锚视图ID的顶部边缘相匹配。对齐…的顶部。...android：layout_alignLeft 属性说明：使此视图的左边缘与给定锚视图ID的左边缘相匹配。对齐…的左侧。...android：layout_alignRight 属性说明：使此视图的右边缘与给定锚视图ID的右边缘相匹配。对齐…的右侧。...android：layout_alignEnd 属性说明：使此视图的结束边缘与给定锚视图ID的结束边缘相匹配。对齐…的结尾处。

6472 0

position-try-fallbacks

: --my-anchor; position-area: top; position-try-fallbacks: bottom; } 我写下代码： /* 定义一个锚点元素...*/ .anchor { anchor-name: --my-anchor; /* 使用自定义的锚点名称 */ height: 80px; /* 高度设为80px...*/ position-area: top; /* 默认在顶部对齐 */ position-try: bottom; /* 尝试从底部定位 */ width...tmp-container"> anchor target /* 定义一个锚点元素...*/ position-area: top; /* 默认在顶部对齐 */ position-try: bottom; /* 尝试从底部定位 */ width

891 0

web前端必备英语词汇都在这儿了，客官你了解多少？

在中国从事程序开发工作的人，似乎英语并不会影响到你找到满意的工作，升职与加薪。但程序毕竟是歪果人创造的，都是由英文和数字表达式所构成的，所以掌握开发过程中常用的英语词汇还是非常重要的。...alpha 透明度，半透明anchor 锚记标记是这个单词的缩写 anchor 锚记a标记是这个单词的缩写 arrow 箭头 auto 自动 appName 程序名 appCodeName 程序代号...闪烁 box 盒子 block 块 br 换行标记 blue 蓝色 bug 软件程序中的错误 body 主体，一个HTML 标记 building 建立 bold 粗体 button 按钮...Clone 克隆、复制 chekbox 复选框 cell 表格的单元格 color 颜色 center 中间，居中 connected 连接的 contact 联系 child 孩子 content...previousElementSibling 返回上一个兄弟元素 password 密码 position 位置 prepend 预先 padding 内边距 progress 进度 point 点

3K2 0

Material Design — 菜单（Menus）

行为滚动替代 Simple Dialogs ---- 用法菜单是与按钮，动作，点或其他控件交互时出现的临时材料，至少包含两个菜单项。...·与当前情景无关的菜单项可能会被删除 ·与情景相关但需要满足某些条件的菜单项可能被禁用（如置灰）。例如，当选择文本后，“复制”这个菜单选项才变为可选择项。...垂直对齐靠近屏幕边缘时，简单菜单将垂直重新对齐，以使所有菜单项完全可见。...取消选择触摸菜单外部或按下系统“后退”按钮，取消操作并关闭菜单。 ? 简单菜单 ·打开时，简单菜单会尝试将当前选定的菜单项目与列表项目垂直对齐。当前选择的菜单项突出显示（如下图）。 ?...·但在靠近屏幕边缘时，简单菜单会重新定位其垂直对齐方式，以便所有菜单项都完全可见。 ? ·简单菜单也应该应该显示在其触发元素上，而不是下面（如下图）。 ?

5.8K10 0

ai学习记录

直接选择工具小白 A 作用：1选择移动锚点和路径 2.调节控制手柄，按住Alt键，可以控制单个手柄。锚点的分类 A角点:有路径线，手柄为隐藏的。...Ctrl+shift+[ 置底 Ctrl+shift+] 置顶 Ctrl+[ 向下一层 Ctrl+] 向上一层 Alt+ctrl+P 文档设置钢笔工具P,添加锚点+，删除锚点-，转换点工具Shift+...C 编辑路径：用小白工具选择锚点，移动锚点，拖动方向更改弧度；按alt拖动方向杆更改为尖角点；使用钢笔工具时，按ctrl拖动可直接移动路径位置。...小黑选中的文字可以设置对齐，对齐中可以选择对齐画板，按上下左右可以移动，按shift+上下左右可以间隔10像素移动。...比例缩放工具（s）、旋转（r）、镜像（o）、倾斜工具: 1）按住图形拖动等比缩放； 2）按住alt，单击定位中心点，并弹出设置框。 3）先拖动缩放后，再按住alt，显示“双三角”即可复制。

2.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭