小程序CSS button按钮自定义高度之后不居中

问题:

按钮设置高度后不居中

<view><button class="btn1" size="">Save</button>
</view>
page {font-size: 30rpx;
}.btn1 {margin-top: 100rpx;height: 190rpx;background: linear-gradient(90deg, #FF8A06, #FF5711);border-radius: 24rpx;color: #fff;
}

解决:

设置一个行高

|---   line-height:190rpx, 还是不居中

 |--- 重置padding,  padding:0


.btn1 {margin-top: 100rpx;height: 190rpx;line-height: 190rpx;border-radius: 24rpx;color: #fff;padding: 0 0 0 0;
}

这回居中了 。

补充 margin问题:

diplay:flex , 设置对齐方式失效, 是因为默认是有边距,需要置0,margin:0

<view class="submit"><button class="btn1" size="default">Save</button><button class="btn2" size="default">Save2</button>
</view>
page {font-size: 30rpx;
}.btn1 {margin-top: 100rpx;height: 90rpx;line-height: 90rpx;border-radius: 24rpx;color: #fff;padding: 0 0 0 0;
}/*尺寸为default或者不是mini的时候,宽为650*/
.btn1:is([size=default]), .btn_1:not([size=mini]) {width: 214rpx;margin: 0;}.btn2 {margin-top: 100rpx;height: 68rpx;line-height: 68rpx;padding: 0;border-radius: 12rpx;color: #F15D21;background-color: #fff;font-size: 27rpx;border: 1px solid #F15D21;
}.btn2:is([size=default]), .btn_2:not([size=mini]) {width: 214rpx;margin: 0;
}.submit {display: flex;justify-content: start;flex-direction: row;background-color: #bfc;padding: 20rpx;
}.clearfix:after, .clearfix:before {content: "";display: table-cell;clear: both;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/70336.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RPA机器人《国网电力》电力行业实施案例-基层减负 提质增效

背景&#xff1a;随着国网战略目标加速落地&#xff0c;数字化转型和精益化管理深化推进&#xff0c;各供电公司亟待突破精细化管控不深入、执行标准不够统一、系统数据不够融通等制约工作质效提升的能力瓶颈&#xff0c;针对这些问题&#xff0c;决定引入诸如RPA、OCR等技术&a…

中国“诺贝尔奖”未来科学大奖公布2023年获奖名单

未来科学大奖委员会于8月16日公布2023年获奖名单。柴继杰、周俭民因发现抗病小体并阐明其结构和在抗植物病虫害中的功能做出的开创性工作获得“生命科学奖”&#xff0c;赵忠贤、陈仙辉因对高温超导材料的突破性发现和对转变温度的系统性提升所做出的开创性贡献获得“物质科学奖…

【【萌新的STM32学习-8】】

萌新的STM32学习-8 STM32CubeMX 是由 ST 公司开发的图形化代码自动生成工具&#xff0c;能够快速生成初始化代码&#xff0c; 如配置 GPIO&#xff0c;时钟树&#xff0c;中间件等&#xff0c;使用户专注于业务代码的开发。现在 ST 主推 HAL 库代码&#xff0c; 经典的标准外设…

opencv实现以图搜图

这里写目录标题 1. 步骤1.1 导入OpenCV库&#xff1a;1.2 加载图像1.3 提取特征1.4 匹配特征1.5 显示结果 2. 完整代码3. 测试图片及效果 1. 步骤 1.1 导入OpenCV库&#xff1a; 在您的C代码中&#xff0c;首先需要导入OpenCV库。您可以使用以下语句导入核心模块&#xff1a;…

C语言暑假刷题冲刺篇——day2

目录 一、选择题 二、编程题 &#x1f388;个人主页&#xff1a;库库的里昂 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏✨收录专栏&#xff1a;C语言每日一练 ✨其他专栏&#xff1a;代码小游戏C语言初阶&#x1f91d;希望作者的文章能对你…

[数据集][目标检测]钢材表面缺陷目标检测数据集VOC格式2279张10类别

数据集格式&#xff1a;Pascal VOC格式(不包含分割路径的txt文件和yolo格式的txt文件&#xff0c;仅仅包含jpg图片和对应的xml) 图片数量(jpg文件个数)&#xff1a;2279 标注数量(xml文件个数)&#xff1a;2279 标注类别数&#xff1a;10 标注类别名称:["yueyawan",&…

uniapp app 实现右上角回首页;点homeButton返回上一页;onNavigationBarButtonTap不生效问题

场景&#xff1a; app&#xff0c;Android移动端 实现点击右上角图标&#xff0c;回首页。 问题&#xff1a;用了官网的 homeButton&#xff0c;图标正常展示了&#xff0c;也可点击&#xff0c;但每次点击后是会返回上一页而非首页。 后来查到说&#xff0c;要结合onNavigatio…

知了汇智“2023年暑期双师型师资培训班”火热进行中

为贯彻落实中共中央、国务院印发《关于全面深化新时代教师队伍建设改革的意见》、国务院办公厅印发《关于深化产教融合的若干见》、教育部办公厅发布《关于做好职业教育“双师型”教师认定工作的通知》等文件精神&#xff0c;助力“双师型”教师联合培养&#xff0c;提升信息技…

Nginx的负载均衡

目录 绪论 1、nginx的七层代理和四层代理 1.1 七层代理简述 1.2 四层代理简述 1.3 四层代理和七层代理之间的区别 1.4 四层和七层谁的速度快 1.5 正向代理 1.6 反向代理 1.6.1 默认算法 1.6.2 加权轮询 1.6.3 ip_hash算法 1.6.4 least_conn 1.6.5 url_hash 1.6 6 …

深兰科技熊猫汽车牵手首恒出行,人工智能技术提升商用车运营服务

8月8日&#xff0c;深兰科技集团旗下熊猫新能源汽车(上海)有限公司(下称熊猫新能源汽车)与河南首恒出行服务有限公司(下称首恒出行)在深兰科技总部举行签约仪式&#xff0c;首恒出行将向熊猫新能源汽车年定向采购10000台商用车&#xff0c;双方将在汽车后市场领域进行技术合作。…

从零构建深度学习推理框架-8 卷积算子实现

其实这一次课还蛮好理解的&#xff1a; 首先将kernel展平&#xff1a; for (uint32_t g 0; g < groups; g) {std::vector<arma::fmat> kernel_matrix_arr(kernel_count_group);arma::fmat kernel_matrix_c(1, row_len * input_c_group);for (uint32_t k 0; k < k…

13 Web全栈 pnpm

什么是pnpm&#xff1f; 可以理解成performant npm缩写 速度快、节省磁盘空间的软件包管理器 特点 快速- pnpm比其他包管理器快2倍高效- node_modules中的文件链接自特定的内容寻址存储库支持monorepos- 内置支持单仓多包严格- pnpm默认创建了一个非平铺的node_modules 因此代…