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

如何使按钮居中并且其宽度是容器的百分比?

要使按钮居中并且其宽度是容器的百分比,可以使用以下方法:

  1. 使用CSS的Flexbox布局:将按钮所在的容器设置为Flex容器,然后使用justify-content: center;将按钮水平居中,使用width: 100%;将按钮宽度设置为容器的百分比。示例代码如下:
代码语言:html
复制
<div class="container">
  <button class="centered-button">按钮</button>
</div>
代码语言:css
复制
.container {
  display: flex;
  justify-content: center;
}

.centered-button {
  width: 80%; /* 设置按钮宽度为容器宽度的80% */
}
  1. 使用CSS的绝对定位:将按钮所在的容器设置为相对定位,然后使用绝对定位将按钮居中,并设置宽度为容器的百分比。示例代码如下:
代码语言:html
复制
<div class="container">
  <button class="centered-button">按钮</button>
</div>
代码语言:css
复制
.container {
  position: relative;
}

.centered-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%; /* 设置按钮宽度为容器宽度的80% */
}

以上两种方法都可以实现按钮居中并且宽度为容器的百分比。具体选择哪种方法取决于你的项目需求和布局结构。

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

相关·内容

如何让高度、宽度不定容器保持水平、垂直居中

这个题目似乎解决办法很多,JS最能够确保各种浏览器中一致性,但是仍然可以使用CSS方式来解决。这个问题分解为两个方面,第一解决左右居中问题,第二解决上下居中问题。 1、左右居中。...左右居中最为简单,使用 text-align:center; 就可以让绝大多数对象居中对齐,并且这个属性也获得了几乎全部浏览器支持。...这是一个好问题,在做居中布局页面时,这是我们最常用让DIV容器居中办法。margin作用于块级元素,而是否作用于其他内敛元素,不同浏览器有着不同解释,因此对于左右居中,没有使用这个方法。...2、上下居中。 上下居中,有两种方法,一种负margin办法,这种对于固定宽度容器,非常好用。另外一种就是适应于高度不固定情形,即使用 vertical-align 属性。...在表单元格中,这个属性会设置单元格框中单元格内容对齐方式。 3、最后代码 综上,可以得出对于高度、宽度都不固定容器如何做到水平、垂直居中: 1 <!

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

    ; 进入 F12 调试模式 , 使用选择工具 , 选择想要分析 https://m.jd.com/ 网页元素 , 第一个 关闭按钮 , 宽度 8% ; LOGO 图片所在盒子 , 宽度..." 内容 , 宽度为 57% ; 立即打开按钮 , 宽度 25% ; 综合上述测量结果 : 当前宽度可以使用百分比进行设置 , 高度暂时写死为 45 像素即可 ; 使用 FastStone...4 个列表项 , 为设置左浮动 , 可以令四个列表项水平排列 , 并且没有默认内外边距 ; 设置 行高 = 内容高度 = 45 像素 , 令其中文本内容垂直居中 ; 设置 text-align...*/ list-style: none; } 4、设置每个元素百分比宽度 按照下图测量内容 , 为每个元素设置百分比宽度 , 注意最后一个红色按钮设置红色背景 ; .app ul.../* 清除浮动固定样式 如果要为某个容器清除浮动 为设置 class="clearfix" 样式 */ content: ""; display: block

    2K10

    web前端开发初学者十问集锦(2)

    浮动元素生成块级框,宽度不会默认扩展至其父容器,而是默认为包含元素宽度。这一点跟inline-block元素相同。 7.web前端开发相关代码如何注释?...-- html代码 --> 8.margin:0 auto;无法使div水平居中使元素进行居中时候,我们要清楚需要居中元素类型,对症下药。...9.如何让浮动div水平居中? 元素垂直居中: 对于页面上块级元素,我发现设置CSS样式margin:auto 0;或者vertical-align:middle;都没有效果。...显然,对于浮动元素,上面两种方法来进行垂直居中无效。那么我们如何来处理这个问题呢,今天我们来探讨下。 (1)使用margin-top:n%; 来实现,需要一点点算法。...先计算自己内容高度,再计算容器高度,算出自己内容高度占整个容器高度百分比。100%减去自己内容高度百分比除以2得出百分比就是 margin-top:百分比数值。

    1.4K10

    冷门布局方法 tabel-cell 可行性研究

    可以实现大小不固定元素垂直居中。 margin 设置无效,响应 padding 设置。 对高度和宽度高度敏感。 不要对 display:table-cell 使用百分比设置宽度和高度。...       我右边     可以看到左右两边以及中间部分文字,虽然它们在不同容器中,且不用管当前列容器设置 padding 是多少,它们在水平方向上绝对对齐...下面说一说关于百分比宽高结论:1. 高度设置百分比无效,只与内容实际高度有关 2. 宽度设置百分比分两种情况, * 一种容器设置 display:table;,这种情况下分两种情况 1....在其前面有其他元素时,宽度可以按照 display:inline-block 元素来计算,也就是宽度会小于等于百分比计算值宽度 * 在父容器未设置 table时,width 百分比值可以理解为内容区宽度加上... border-box 左右两边到父容器边框距离,也就是 width 百分比值越小,其所占据宽度越大 如果你对这个问题比较感兴趣,可以看看这个问答。

    63420

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

    进行显示,底部选项 则是从底部开始显示: 5.1.4 水平对齐 水平对齐 指 页面 中元素横排如何进行显示。...水平对齐有 3 个对齐方式,依次靠左、居中、靠右这三个方式: 靠左 对齐指第 1 个元素在横排显示为左侧、居中则在中部、靠右则在右部开始显示: 5.2 行属性 行常用属性有以下几点: 宽度...高度 上外边距 下外边距 左外边距 右外边距 上内边距 下内边距 边框宽度 边框颜色 边框类型 边框位置 5.2.1 行、列宽度、高度 行、列宽度、高度可以设置成百分比或者具体像素,行 与 列 元素容器...在 行 与 列 中设置宽度可以设置成 百分比 或 具体像素值,设置 百分比 宽度使用百分号 % 结尾,设置宽度为 具体像素值 时使用 px 结尾,行与列高度也是相同设置方法: 5.2.2 行、列内...可以更改输入提示文本做出更人性化样式,也可以更改内容 可否编辑 属性,使文本框内容设置成可编辑或不可编辑:

    4K20

    三、登录页制作《iVX低代码无代码个人博客制作》

    一、登录页实现 本节需要做登录页如下: 该页面我们复习可以值,首先设置整个页面页面的垂直和水平对其为居中,随后一个容器包裹对应登录区域,此时我们创建一个页面命名为登录注册页,并且设置水平和垂直对其为居中...: 接着我们创建一个行,命名为登录框,并且需要设置这个行宽高为 500*300,水平方向对其为居中: 接着我们创建一个行,命名为标题,在内部创建一个文本,编写文本内容为登录,接着设置这个标题水平分享垂直居中...,高度为包裹,并且还可以设置一定内边距: 接着再创建一个行命名为手机号验证,这个框用于存放手机号以及按钮,此时也需要设置这个框水平方向对齐为居中、高度为包裹: 接着在这个行内创建两个元素...此时由于其内部每一个行水平内容都是设置为居中,我们需要内部元素宽度一致才能对,在此验证码输入框宽度要等于手机号码和发送按钮宽度综合。...,在触发器中给予事件,触发后用于存储倒计时秒数变量减1: 那么接下来如何使文本内容更改为描述呢?

    1.2K20

    你未必知道49个CSS知识点

    【input宽度】?并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,默认宽度取决于size特性值 ? 08.【定位特性】?...【颜色对比度】❣蓝底红字,由于颜色对比度比较低,故而看不清,因此不是好配色方案? ? 16.【定宽高比】♥css实现定宽高比原理:padding百分比相对于包含块宽度,而不是高度 ?...css绘制彩带原理 ? 19.【隐藏文本】?隐藏文字内容两种办法 ? 20.【居中】?实现居中一种简单方式 ? 21.【角向渐变】?新渐变:角向渐变。可以用来实现饼图 ? 22....【背景位置百分比】?background-position百分比正确理解方式:图片自身百分比位置与容器同样百分比位置重合 ? 23.【背景重复新值】?...background-attachment指定背景如何附着在容器上,注意属性值local和fixed使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26.

    1.3K20

    你不知道 CSS

    【input宽度】?并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,默认宽度取决于size特性值 ? 08.【定位特性】?...【颜色对比度】❣蓝底红字,由于颜色对比度比较低,故而看不清,因此不是好配色方案? ? 16.【定宽高比】♥css实现定宽高比原理:padding百分比相对于包含块宽度,而不是高度 ?...css绘制彩带原理 ? 19.【隐藏文本】?隐藏文字内容两种办法 ? 20.【居中】?实现居中一种简单方式 ? 21.【角向渐变】?新渐变:角向渐变。可以用来实现饼图 ? 22....【背景位置百分比】?background-position百分比正确理解方式:图片自身百分比位置与容器同样百分比位置重合 ? 23.【背景重复新值】?...background-attachment指定背景如何附着在容器上,注意属性值local和fixed使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26.

    1.3K30

    前端面试之HTML && CSS

    BFCCSS布局一个概念,一个独立渲染区域,规定了内部box如何布局, 并且这个区域子元素不会影响到外面的元素,其中比较重要布局规则有内部 box 垂直放置,计算 BFC 高度时候,浮动元素也参与计算...box重叠 BFC一个独立容器容器里面的子元素不会影响到外面的元素 计算BFC高度时,浮动元素也参与计算高度 元素类型和display属性,决定了这个Box类型。...margin实现自适应居中 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中 父级设置相对定位,子级设置绝对定位,并且通过位移 transform...其实 rem 布局本质等比缩放,一般基于宽度。...缺点: (1)计算困难 (2)各个属性中如果使用百分比,相对父元素属性并不是唯一。造成我们使用百分比单位容易使布局问题变得复杂。

    4.4K10

    你未必知道49个CSS知识点

    【input宽度】?并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,默认宽度取决于size特性值 ? 08.【定位特性】?...【颜色对比度】❣蓝底红字,由于颜色对比度比较低,故而看不清,因此不是好配色方案? ? 16.【定宽高比】♥css实现定宽高比原理:padding百分比相对于包含块宽度,而不是高度 ?...css绘制彩带原理 ? 19.【隐藏文本】?隐藏文字内容两种办法 ? 20.【居中】?实现居中一种简单方式 ? 21.【角向渐变】?新渐变:角向渐变。可以用来实现饼图 ? 22....【背景位置百分比】?background-position百分比正确理解方式:图片自身百分比位置与容器同样百分比位置重合 ? 23.【背景重复新值】?...background-attachment指定背景如何附着在容器上,注意属性值local和fixed使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26.

    1.2K10

    你未必知道49个CSS知识点

    【input宽度】?并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,默认宽度取决于size特性值 ? 08.【定位特性】?...【颜色对比度】❣蓝底红字,由于颜色对比度比较低,故而看不清,因此不是好配色方案? ? 16.【定宽高比】♥css实现定宽高比原理:padding百分比相对于包含块宽度,而不是高度 ?...css绘制彩带原理 ? 19.【隐藏文本】?隐藏文字内容两种办法 ? 20.【居中】?实现居中一种简单方式 ? 21.【角向渐变】?新渐变:角向渐变。可以用来实现饼图 ? 22....【背景位置百分比】?background-position百分比正确理解方式:图片自身百分比位置与容器同样百分比位置重合 ? 23.【背景重复新值】?...background-attachment指定背景如何附着在容器上,注意属性值local和fixed使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26.

    1.5K20

    iVX 倒计时制作

    使其可以居中对齐,并且给予对应背景色,设置内部元素为居中对齐,接着为了使内部元素可以举例上下左右有一点举例,可以再设置内边距增加边缘厚度: 接着创建一个行,命名为倒计时,在里面用于显示对应文本...,设置其文本底部对齐显示: 接着咱们先将初始文本加入其中,并且设置好对应大小: 这些文本宽度都是33%,这样才能占满一行: 接着添加两个对应按钮,具体设置宽高不再赘述:...接着创建一个行,命名为记录区域用于记录记下时间,设置宽度为 300px,还需要注意,为了使其可以滚动,咱们需要对应设置可以y轴裁剪隐藏滚动即可: 接着咱们再到这个行下创建一个循环创建和一个文本...: 因为记录事件肯定是一个数组之类容器,所以肯定需要使用循环创建进行创建。...,随后分加1,所以在这里我们还需要创建两个变量,分和时: 此时我们还需要知道一个问题,那就是如何在小于 10 时候使前面有一个0,咱们可以直接再创建3个字符串,字符秒、字符分、字符时,判断秒分时是否小于

    1.5K20

    《iVX 高仿美团APP制作移动端完整项目》04 美食页 标题、搜索、商家标题制作

    ;接着咱们在右侧行中添加一个文本,并且给予对应文本为美食: 随后在设置左行宽度为包裹: 右行宽度为撑开: 此时右行与左行将会共同占据这一行,原因右行撑开将会把剩余空间给占据...,效果如下: 接下来,咱们设置右行水平对齐为居中: 由于左行占据了部分大小原因,右行居中并不会完全居中,此时我们知道左行大小为包裹,那么图标元素为 30 宽,那么只需要美食文本往右侧偏离...二、内容页制作 2.1 内容页外框架确定 我们先看内容页外部框架整体布局: 由此我们值,该内容包裹在一个容器内,该容器背景色为白色,那么我们在此需要创建一个行容器并且设置高度为包裹、背景色为偏白色...: 2.2 搜索框制作 接着我们需要制作搜索框内容: 我们在内容行下创建一个行,命名为搜索框,并且设置背景色透明、高度包裹以及水平垂直居中: 接着咱们在搜索框中创建两个元素,一个输入框一个按钮...接着咱们在商家下创建一个绝对定位容器,设置高度为 60,在其内部创建一个图片: 那如何使其覆盖到下面呢?

    97820

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

    1/5 */ flex: 1; } 3、弹性布局主轴和侧轴设置 在下面的布局中 , 上下显示两个元素 , 并且这两个元素水平居中 ; 使用 Flex 弹性布局实现 ; 如果想要 让元素上下排列..., 需要修改主轴方向为 y 轴 , 子元素从上到下排列 ; 水平方向居中 , 需要通过设置 侧轴居中 实现 , 主轴 y 轴 , 侧轴就是 x 轴 , 代码示例 : .local-nav a...右侧按钮设置固定大小 左侧搜索栏设置成 flex: 1 样式 自动占据剩余空间 */ display: flex; /* 固定定位盒子始终显示在浏览器中指定位置 与父容器或其它容器无关...行高 原因 这是 CSS3 模型 CSS3 中垂直居中在 边框 + 内边距 + 尺寸 总高度中垂直居中 */ height: 26px; line-height:...24px; border: 1px solid #ccc; /* 设置该搜索框占据除右侧固定大小按钮之外剩余父容器空间 */ flex: 1; /* 设置文字大小和颜色

    53720

    CSS进阶03-定位体系,格式化上下文,常规流

    属性值如果百分比,则是根据包含块height来计算,如果属性值既不是value,也不是百分比,那么就默认auto。...属性值如果百分比,则是根据包含块width来计算,如果属性值既不是value,也不是百分比,那么就默认auto。...属性值如果百分比,则是根据包含块height来计算,如果属性值既不是value,也不是百分比,那么就默认auto。...属性值如果百分比,则是根据包含块width来计算,如果属性值既不是value,也不是百分比,那么就默认auto。 3....它是页面中一块渲染区域,并且有一套渲染规则,它决定了子元素将如何定位,以及和其他元素关系与相互作用。 那么,FC包含哪些类型呢?答案六种类型:BFC、IFC、TFC、GFC 、FFC,RFC。

    1.7K10

    【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

    主要是取消列表小圆点 */ li { list-style: none; } 设置图片自适应 : 设置图片可能 大于或小于 图片容器 , 设置宽度填充 100% 父容器 , 可以保证图片填充满父容器..., 需要 使用绝对定位在父容器中任意摆放 , 包括左右垂直居中按钮 , 下方小圆点 ; 子元素需要使用绝对定位 , 那么父容器必须使用相对定位 ; /* 子绝父相 : 整个父容器需要设置相对定位...走到父容器宽度一半 */ left: 50%; /* 然后 向左走自己一半宽度 */ margin-left: -35px; 使用圆角矩形设置左右两侧半圆 : 圆角矩形容器高度...13 像素 , 设置左右两侧为半圆 , 设置 7 像素圆角即可 ; /* 四个角都设置 7 像素圆角 */ border-radius: 7px; 使用圆角矩形设置小圆点 : 小圆点宽高...任意摆放 */ position: absolute; /* 设置底部小圆点容器居中 */ /* 首先 走到父容器宽度一半 */ left: 50%; /* 然后 向左走自己一半宽度

    1.8K10

    建议收藏!总结了42种前端常用布局方案

    : 300px; width: 300px; background: #e599f7; } HTML 结构也是固定,就是一个父级,宽度继承了 宽度,还有一个子级,这里固定300px...定宽块级元素水平居中(方法一) 对于定宽块级元素实现水平居中,最简单一种方式就是 margin: 0 auto;,但是值得注意一定需要设置宽度。...右列容器开启右浮动 使中间自适应宽度为父级容器减去两个定宽列 实现CSS代码如下: .left { /* 1....浮动+百分比方式 这种方式比较简单,开启浮动,使每个元素占25%宽度。...行内块级+百分比方式 这种方式与上面那种方式类似,不过需要注意行内块级元素有一些类似于边距几个像素,导致各25%会超出容器

    4.2K30

    建议收藏!总结了 42 种前端常用布局方案

    : 300px; width: 300px; background: #e599f7; } HTML 结构也是固定,就是一个父级,宽度继承了 宽度,还有一个子级,这里固定300px...定宽块级元素水平居中(方法一) 对于定宽块级元素实现水平居中,最简单一种方式就是 margin: 0 auto;,但是值得注意一定需要设置宽度。...右列容器开启右浮动 使中间自适应宽度为父级容器减去两个定宽列 实现CSS代码如下: .left { /* 1....浮动+百分比方式 这种方式比较简单,开启浮动,使每个元素占25%宽度。...行内块级+百分比方式 这种方式与上面那种方式类似,不过需要注意行内块级元素有一些类似于边距几个像素,导致各25%会超出容器

    4.2K30
    领券