如何正确使用css中vertical-align
首先明确,vertical-align只对inline-block和inline元素有效。
在说vertical-align之前,需要先说明一下什么是line box。
浏览器中显示的一行会包含多个非block元素(有block元素时就换行了),通过一个box可以把这一行包含起来,这就是一个line box。
比如一个div,他会占据一行,包裹着内部所有非block元素的就是一个line box。
line box的高度,是本行中拥有最高行高的元素的高度。
此时,对拥有最高行高的非block元素设置vertical-align值,会直接影响本行的基线位置(可以说就是设置了本行的基线位置),本行中其他非block元素设置vertical-align时,都是相对于本行的基线位置进行显示。
举例:
<div style="height:100px;width:100px;border:1px solid black;">
<span style="display:inline-block;height:50px;vertical-align:top;border:1px solid black;">1</span>
<span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;">
<span style="display:inline-block;height:50px;vertical-align:middle;border:1px solid black;">1</span>
<span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;">
<span style="display:inline-block;height:50px;vertical-align:bottom;border:1px solid black;">1</span>
<span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
</div>
会发现显示如下图所示。
1所在的span高度最高,所以其设置的vertical-align会直接影响本行的基线位置。调整1所在的span出现的先后顺序,结果都是一样的。
<div style="height:100px;width:100px;border:1px solid black;">
<span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
<span style="display:inline-block;height:50px;vertical-align:top;border:1px solid black;">1</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;"> <span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
<span style="display:inline-block;height:50px;vertical-align:middle;border:1px solid black;">1</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;">
<span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
<span style="display:inline-block;height:50px;vertical-align:bottom;border:1px solid black;">1</span>
</div>
再举例:
在一个block元素中使用
#parent::before或者#parent::after
{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
可使#parent中的非block元素垂直居中显示,也是上述的原理。
ps:
如果想让1在span中垂直居中显示,保证span的display是inline-block,然后将span的line-height设置为50px,同span高度相等即可。不可设置为100%,最后的line-height只是文字大小的高度。
如何正确使用css中vertical-align的更多相关文章
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- CSS中强大的EM
(转)作者:dearjohn ,发布于2012-7-31 http://www.uml.org.cn/html/201207311.asp 使用CSS也好久了,但一直都是在使用“px”来设置Web元素 ...
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- css中的em 简单教程 -- 转
先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...
- CSS中的EM属性之弹性布局
这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...
- 深入理解CSS中的margin
1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...
- CSS中设置div垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 比较css中单位px,em和rem的区别
国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原 ...
- CSS中强大的EM(转)
转自:https://www.w3cplus.com/css/px-to-em CSS中强大的EM 作者:大漠 日期:2011-10-27 点击:97370 em 长度单位 编辑推荐:3月31日前,点 ...
随机推荐
- STL UVA 11995 I Can Guess the Data Structure!
题目传送门 题意:训练指南P186 分析:主要为了熟悉STL中的stack,queue,priority_queue,尤其是优先队列从小到大的写法 #include <bits/stdc++.h ...
- Python学习笔记06
源代码文件第一行添加:#coding:utf-8,这样就可以避免了 或者:#-*- coding: UTF-8 -*- dict:实际就是哈希表,其键只能是不可变类型,如string,bool ...
- 被解放的GPU CSS3动画加速
概念 图形处理器( Graphics Processing Unit ) 专门用来处理在个人电脑.工作站或游戏机上图像运算工作 显卡的“心脏” 90%以上的新型台式电脑和笔记本型电脑拥有集成图形处理器 ...
- Coder-Strike 2014 - Round 1 B. Network Configuration
题目的意思就是给每台电脑的最大传输速度,可以限制每台电脑的最大速度,然后选择k台电脑,使这k台电脑有相同的速度,且这个速度最大 典型的贪心算法,电脑的速度排个序,选择第k大速度即可 #include ...
- ACM 会场安排问题
会场安排问题 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工 ...
- C语言(4)
C语言(4)--数据类型 C语言在用“/”是,注意左右两边都是整数时,商也是只有整数部分. 下面介绍一下C语言常用的数据类型: 注意: 1.char类型数据范围:256中字符. 2.float和do ...
- JAVA_用Java来获取访问者真实的IP地址
在jsp里,获取客户端的ip地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实I ...
- centos 7 搭建本地yum仓库
首先需要创建一个目录 mkdir /1 #在根目录下创建一个名字为1的目录 将光盘挂载到创建的这个目录 mount /dev/cdrom /1 yum命令配置文件在/etc/yum.repos.d ...
- SQL SERVER各种用法总结
sql创建临时表http://www.cnblogs.com/jeffwongishandsome/archive/2009/08/05/1526466.html sqlserver更改表名 EXEC ...
- 怎么控制表单placeholder属性的样式兼容各大浏览器?
当我们使用placeholder的时候会遇到样式的控制和版本的兼容问题(但是还是只有css3支持),以至于达不到我们想要的效果,下面来看一种: 下面是css: .invalid:-moz-placeh ...