java文本框字体垂直居中_实现css文字垂直居中的8种方法
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器。
实现css文字垂直居中的8种方法如下:
1.使用绝对定位和负外边距对块级元素进行垂直居中
css垂直居中效果:
css垂直居中实现代码:
这个方法兼容性不错,但是有一个小缺点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中。
2.使用绝对定位和transform
代码如下:
这种方法非常明显的好处就是不必提前知道被居中的元素的尺寸,因为transform中偏移的百分比就是相对于元素自身的尺寸而言。
3.绝对定位结合margin:auto
这种方式的两个核心是:把要垂直居中的元素相对于父元素绝对定位,top和bottom设置为相等的值,我这里设置成0了,当然也可以设置为99999px或者-99999px,无论什么,只要两者相等就行。这一一步做完之后再将要居中的元素的margin设为auto,这样就可以实现垂直居中了。
被居中元素的宽度也可以不设置,但是不设置的话,就必须是图片这种自身就包含尺寸的元素,否则无法实现。
4.使用padding实现子元素的垂直居中
这种方式非常简单,就是给父元素设置相等的上下内边距,则子元素自然是垂直居中的,自然这个时候父元素是不能设置高度的,要让它自动被填充起来,除非设置了一个正好等于上内边距+子元素高度+下内边距的值,否则无法精确地垂直居中。
这种方式看似没有什么技术含量,但其实在某种场景下也是非常好用的。
5.使用flex布局
flex布局(弹性布局/伸缩布局)里门道颇多,这里先针对用到的东西简单说一下,想深入学习的小伙伴可以去看阮一峰老师的博客。
flex也就是flexible,意思为灵活的,柔韧的,易弯曲的。
元素可以通过设置display:flex;将其指定为flex布局的容器,指定好了容器之后再为其添加align-items属性,该属性定义项目在交叉轴(这里是纵向周)上的对齐方式,可能的取值有五种,分别如下:
flex-start:交叉轴的起点对齐;flex-end:交叉轴的重点对齐;
center:交叉轴的重点对齐;baseline项目第一行文字的基线对齐;
strech(该值是默认值):如果项目没有设置高度或者设置为auto,那么将占满整个容器的高度。
6.弹性布局
这种方式也是给父元素设置display:flex,设置好之后改变主轴的flex-direction:column,该属性可能的取值有四个,分别如下:
row(该值为默认值):主轴为水平方向,起点在左端;
row-reverse,主轴是水平方向,起点在有端;
column主轴为垂直方向,起点在上沿;
column-reverse:主轴为垂直方向,起点在下沿。
justify-content属性定义了项目在主轴上的对齐方式,可能取的值有五个,分别如下(不过具体的对齐方式与主轴的方向有关,以下的值都是假设主轴为从左到右的):
flex-staart(该值是默认值):左对齐;
flex-end:右对齐;
center:居中对齐;
space-between:两端对齐,各个项目之间的间隔均对齐;
space-around:各个项目两侧的间隔相等。
7.还有一种在前面已经见到过很多次的方式就是使用line-height对单行文本进行垂直居中
这里有一个小坑需要大家注意:line-height(行高)的值不能设为100%;我们来看看官网文档中给出的关于line-height取值为百分比时候的描述:基于当前字体尺寸的百分比行间距,所以大家就明白了,如果是百分比是相对于字体尺寸来讲的。
8.使用display和vertical-align对容器里的文字进行垂直居中
这里关于vertical-align啰嗦两句:vertical-align属性只对拥有valign特性的html元素起作用,例如表格元素中的
等等,而像
valign属性规定单元格中内容的垂直排列方式,语法:,value的可能取值有四种:
top:对内容进行上对齐
middle:对内容进行居中对齐
bottom:对内容进行下对齐
baseline:基线对齐
关于baseline值:基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline值设置行中的所有表格数据都分享相同的基线。该值的效果常常与bottom值相同。不过,如果文本的字号各不相同,那么baseline的效果会更好。
更多关于CSS垂直居中的方法大家可以参考本文下面的相关文章或者咨询我们的小编
java文本框字体垂直居中_实现css文字垂直居中的8种方法相关推荐
- java mysql防重复提交_防止数据重复提交的6种方法(超简单)!
有位朋友,某天突然问磊哥:在 Java 中,防止重复提交最简单的方案是什么? 这句话中包含了两个关键信息,第一:防止重复提交:第二:最简单. 于是磊哥问他,是单机环境还是分布式环境? 得到的反馈是单机 ...
- java成员变量怎么赋值_给成员变量赋值的两种方法
JAVA 跟C++ 差不多,给类里面的私有成员变量一般有两种方法: 一种是通过 成员函数 来赋值 一种是:通道构造函数来赋值 /* 我们一直在使用构造方法,但是,我们确没有定义构造方法,用的是哪里来的 ...
- Java文本框设置灰色_如何在JTextField中显示灰色的“幽灵文本”?
小编典典 对于它的价值,我发现实际实现它很有趣,因此我想与您分享(我不是在寻求投票). 这真的是非侵入性的,因为您要做的就是致电new GhostText(textField, "Pleas ...
- java 文本框 虚体字_虚字的意思、虚的繁体字、虚的笔顺笔画、虚字部首和繁体字虚的意思...
虚的拼音xū.笔顺.部首虍.笔画11有关中文"虚"的繁体字怎么写,和简体字虚笔划结构 虚的意思分解: 学会虚的繁体字,先看虚字的演变.笔画(笔划).笔顺.部首.拼音.有关带有繁体字 ...
- java防止sql注入方正_有效防止SQL注入的5种方法总结
sql注入入门 SQL 注入是一类危害极大的攻击形式.虽然危害很大,但是防御却远远没有XSS那么困难. SQL 注入漏洞存在的原因,就是拼接 SQL 参数.也就是将用于输入的查询参数,直接拼接在 SQ ...
- java模拟网易邮箱登录_使用服务端和客户端两种方法 模拟网易邮箱实现全选,全不选的功能...
服务端和客户端的差别是 服务端在每次全选或全不选是都要刷新界面 而客户端不会 服务端: 前台 DataKeyNames="id" DataSourceID="SqlDat ...
- java判断telnet通不通_(转)测试端口通不通(四种方法)
一般情况下使用"telnet ip port"判断端口通不通.接下来通过本文给大家分享四种方法测试端口通不通,感兴趣的朋友一起学习吧 一般情况下使用"telnet ip ...
- html 改变文本框字体颜色,CSS更改文本框的字体颜色
我已搜索和搜索,但不能很好地得到这个权利.我在我的网站上有一个文本框,在我的CSS/HTML中,我将它定义为一个类,就像其他任何东西一样,并给它一个背景图像没有问题.我决定我需要改变字体颜色,但不管我 ...
- java计算两个文本框的值,java 文本框自动获取另外两个文本框的值的乘积
java 文本框自动获取另外两个文本框的值的乘积 关注:282 答案:2 手机版 解决时间 2021-02-25 21:59 提问者壹玍徴戰何亽陪 2021-02-25 13:53 在panel里 ...
最新文章
- Scrum指南新版发布,再添新概念—Product Goal
- matlab int8 矩阵,unit8_matlab数据类型转换——int8转换成unit8
- 计算机显示器不清楚跟电池有关系吗,电脑液晶显示器显像模糊是什么原因
- Ubuntu 下查看CUDA和cuDNN 版本
- 1026: [SCOI2009]windy数 (按位DP)
- RichardStallman--15年自由软件的历程
- 悲观锁定时如何避免可怕的死锁-以及Java 8的一些用法!
- windows下Call to undefined function curl_init() error问题
- 全部物理宇宙全部能由数学理解
- Linux实现免密码登录
- android高级资料
- 工程选择LibGdx--开发环境搭建Strut2教程-java教程
- KL散度(双向KL散度) JS散度
- php 获取xlsx,使用php读取xlsx文件
- 服务器修改传奇道士神兽升级,传奇游戏小道士关于神兽升级的研究——骨灰级传奇玩家分享...
- MapReduce计算PMI
- 查询电脑内存条型号的办法
- html5 iphone苹果手机主屏幕 触摸滑动效果
- 转载 冯羽的程序生涯之我见
- C/C++黑魔法-三元运算符简洁写法
热门文章
- 边缘计算服务器传感器无线组网,边缘计算扩展IoT网络三种方法
- Python对字典列表多维数组排序
- 学习笔记-网络安全渗透测试渗透测试流程
- C#构造Expression表达式调用字符串Contains
- 基于JAVA社区留守儿童帮扶系统演示录像2020计算机毕业设计源码+数据库+lw文档+系统+部署
- mysql myisam表_mysql优化之MyISAM表锁
- PHP 中流行的 rpc 框架有哪些
- 55、基于51单片机的超声波测距仪数码管设计
- 机器学习之求解无约束最优化问题方法(手推公式版)
- 信息化那点事之:一把手工程