css里面设置按钮(button)让字体居中

news2024/11/20 18:31:23

题目:设置button中的字体让其居中,不至于溢出(字体下落,重影等问题)

1,抛出问题,如图所示在这里插入图片描述
2,引出我的代码

<view class="loginBtn">
			<form action="check.jsp" method="get">
				<button class="btnValue" type="submit">登录</button>
			</form>
		</view>
```图2,登录按钮的整体思想

css区域的代码
.loginBtn{
		width: 750rpx;
		height: 100rpx;
		background-color: #3D87FF;
	}
  图3,这里是按钮的整体布局,

再来看登陆这两个子的布局
  // 登录这两个字眼的布局
	.btnValue{
		width: 176rpx;
	    height: 44rpx;
		background-color: #3D87FF;
		text-align: center;
		border: none;
	}

3,找出问题

问题在于我设置的总高度100rpx是有了,但是登录这两个子的高度要设置行高行高,行高。重要的事情说三遍!,不是单纯的设置一个height就完事了!根据这个问题设置line-height,即可迎刃而解。
如图所示
在这里插入图片描述
抛出代码
在这里插入图片描述
如图所示,配置成line-height属性即可生效。

总结

1,先配置整体的按钮高度,
2,配置字体的高度,重点是
(1),字体的高度低于总体设置的高度
(2),这里的字体高度用的是line-height,line-height,line-height,*(重要的事情说三遍)***而不是height。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

带你吃透Servlet技术(二)

个人主页&#xff1a; 几分醉意的CSDN博客_传送门 前言&#xff1a;在上一篇&#xff0c;我们已经初步的了解了 Servlet技术 传送门&#xff0c;接下来我们继续深入学习Servlet。 本文目录&#x1f496;继承HttpServlet实现Servlet程序✨代码实战✨自动生成doGet和doPost方法✨…

猿创征文|如何使用 Element UI? 以登录框为例带你感受一下基础使用

目录 前言 一、安装&#xff08;所有内容&#xff09; 二、按需引入 三、案例演示 1.案前整理 2.代码演示&#xff08;后附源码&#xff09; 3.源码 前言 Element-ui&#xff0c;一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库&#xff0c;提供了配套设计…

el-upload上传文件

el-upload上传文件 前言 公司和学校项目都用到了上传文件的功能&#xff0c;记录一下。 准备 express实现的上传接口 const express require(express); ​ // 文件上传模块 const multiparty require(multiparty) ​ // 提供跨域资源请求 const cors require(cors) ​ …

Idea中使用Tomcat部署并启动Web项目

首先在Idea中选择编辑运行配置&#xff0c;如下图 左上角的“”号&#xff0c;选择Tomcat服务&#xff0c;如下图 自定义服务名称和项目在浏览器的访问路径 配置Tomcat服务器路径&#xff0c;如下图 然后在服务器中部署项目&#xff08;下面的警告提示&#xff1a;Warning: No …

nginx响应码301及访问路径参数丢失之间的关系

nginx响应码301及访问路径参数丢失之间的关系 本文比较长&#xff0c;所以写了一篇比较短的结果导向的文章&#xff0c;换了一下思路&#xff0c;大家可以看一这篇文章&#xff0c;如果感兴趣再来看这篇文章&#xff1a;nginx导致vue设置history模式下的请求丢失参数 背景描述…

Java使用WebStocket实现前后端互发消息

记录一下自己使用WebStocket实现服务器主动发消息的过程和踩得雷。 需求&#xff1a;车牌识别系统识别到车牌后&#xff0c;持续向前端推送车牌信息&#xff0c;直到前端回复收到。 测试需求&#xff1a;新增 客户后&#xff0c;持续向前端推送客户信息&#xff0c;直到前端收…

type=“module“ 你了解,但 type=“importmap“ 你知道吗

新出了一个系列&#xff1a;Vue2与Vue3 技巧小册 有梦想&#xff0c;有干货&#xff0c;微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录&#xff0c;有一线大厂面试完整考点、资料以及我的系列文章。 当E…

css的rotate3d实现炫酷的圆环转动动画

1.实现效果 2.实现原理 2.1 rotate3d rotate3d&#xff1a;rotate3d() CSS 函数定义一个变换&#xff0c;它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正&#xff0c;运动将为顺时针&#xff0c;如果为负&#xff0c;则为逆时针。 语法&#xff1a; …

【面试题】redux及中间件相关面试题解析

1、什么是Redux&#xff1f; Redux就是一个js容器&#xff0c;用于全局的状态管理 2、为什么在React项目中要使用Redux&#xff1f; 因为React本质上就是一个UI库&#xff0c;它是单向数据流的&#xff0c;就是说数据只能从父组件通过props流向子组件&#xff0c;但如果子组…

Vue 无感刷新token

关于无感刷新的理解: 实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,当token过期时不需要用户跳回登录页重新登录,而是当token失效时,进行拦截,发送刷新token的请求,获取最新的token进行覆盖,让用户感受不到token已经过期 刷新token的一些方案…

零基础JavaScript学习【第六期】

博主有话说:这个礼拜有些忙,离上一次更新已经过了亿天,这几天较忙所以更新会有点慢,谢谢大家的支持。(っ•̀ω•́)っ✎⁾⁾ 我爱学习 个人空间:GUIDM的个人空间 专栏内容:零基础JavaScript学习 基础还是关键。 欢迎大家的一键三连。 前情回顾:第一期https://blog.cs…

uni-app - 最详细 H5 网页接入微信支付功能,提供从详细的示例代码与注释(移动端网页实现微信支付能力,微信公众号前端支付 JSAPI / JS-SDK 详细示例源码)官方最新超级详细教程

前言 关于 uni-app 项目中接入微信支付的文章鱼龙混杂,各种 JSAPI / JS-SDK 乱代码、过时、没注释、不讲流程原理,非常难用。 本文实现了 uni-app H5 移动端网页项目,实现微信支付功能,详细讲解接入流程及超详细示例代码, 从 0-1 完全站在小白的角度,让您无需太多知识也…

【React】React入门--生命周期

&#x1f380;个人主页&#xff1a;努力学习前端知识的小羊 感谢你们的支持&#xff1a;收藏&#x1f384; 点赞&#x1f36c; 加关注&#x1fa90; 文章目录React生命周期初始化阶段运行中阶段销毁阶段老生命周期的问题新生命周期代替性能优化的方案重要的勾子即将废弃的勾子R…

【ElementUI样式优化1】el-table 修改斑马格样式、修改滚动条样式、添加表头边框、删除表格边框划线

重要的不是过去&#xff0c;而是你怎末看待过去&#xff0c;而我们对过去的看法&#xff0c;是可以改变的。 效果预览&#xff1a; &#xff08;1&#xff09;删除表格外框&#xff0c;内框。 &#xff08;2&#xff09;添加表头边框&#xff0c;修改表头文字大小、颜色 &…

猿创征文 |【高级篇】Java 进阶之JVM实战

文章目录⚡前言一、面试题解析二、JVM 理论详解⛅JVM的位置❄️JVM的体系结构⏳类加载器三、JVM 双亲委派机制四、Native 关键字五、PC寄存器 与 方法区六、栈与堆七、三种JVM、新生区、老年区、永久区⛵小结⚡前言 JVM 是 Java 实现 跨平台的基础&#xff0c;所有的Java 程序…

[遇到的问题-已解决]Cannot resolve plugin org.apache.maven.plugins:maven-compiler-plugin:3.1

如上图所示&#xff0c;这是我解决好的&#xff0c;刚开始的时候爆红有这些&#xff1a; 我按照在网上查找的方法&#xff0c;一一试了。 首先&#xff0c;maven 安装的路径和和本地仓库的目录必须要保持一致 打开setting-Build,Excution,Deployment-Build Tools-Maven&#…

vue框架介绍

概述 Vue 是一套用于构建用户界面的渐进式框架 对渐进式的理解&#xff1a; 每个框架都不可避免会有自己的一些特点&#xff0c;从而会对使用者有一定的要求&#xff0c;这些要求有强有弱&#xff0c;它的强势程度会影响在业务开发中的使用方式。 vue的定位&#xff1a; 我在做…

【Vue入门必备知识篇03】--- 生命周期 数据共享

前言❤️ 过好自律的生活&#xff0c;美好才会在路上不期而遇 ❤️【Vue入门必备知识篇03】--- 生命周期 & 数据共享一、生命周期 & 数据共享&#xff08;1&#xff09;组件的生命周期1.1 生命周期 & 生命周期函数1.2 组件生命周期函数的分类1.3 生命周期图示&…

记录Chrome插件从V2版本升级到V3版本的过程中遇到的问题

总结一下自己在把Chrome V2版本的插件升级到V3版本的过程中&#xff0c;遇到的一些问题&#xff0c;之前也有发布一章V3版本的manifest.json配置项参数说明&#xff0c;基本也涵盖了下面提到的几个配置项的改动&#xff0c;传送门>> 总结分了两大块&#xff0c;一块是ma…

【Node.js】深度解析常用核心模块-fs模块

✅ 作者简介&#xff1a;一名将要迈入大三的大学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f525;前言 在文章&#x1f449;Node.js — 前…