vertical-align 和line-height 以及baseline的解析
line-height是相对于font-size来计算的,vertical-align的百分比值是相对于line-height来计算的,vertical-align的默认是baseline;
demo:
font-size:14px;
line-height:1.5;
line-height的值其实就是1.2*20=21px;
如果想设置行高为25px;25/14=1.78571427,需要设置line-height为1.7858;向上取值,不能四舍五入
demo:
line-height:20px;
vertical-align:30%;
vertical-align相当于6px;vertical-align设置数值时,是相对于baseline来说的,就是相对于baseline向上移动6px
vertical-align
和line-height的
关系从HTML5文档声明开始的,因此,以下探讨的现象,都是在页面为HTML5声明前提下,类似下面的doctype:
<!doctype html>
<html>
对于内联元素,vertical-align与line-height虽然看不见,但实际上「到处都是」!
vertical-align只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用
所谓inline-block水平的元素,就是既可以“吸”又可以“咬”的元素,既可以与inline水平元素混排,又能设置高宽属性的元素。哪些元素呢,例如图片,按钮,单复选框,单行/多行文本框等HTML控件,只有这些元素默认情况下会对vertical-align属性起作用。
来自:http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
例如:
div中包裹一个img元素,会发现img的下方会有空白,那是因为:
块状元素内部的内联元素的行为表现,就好像块状元素内部还有一个(更有可能两个-前后)看不见摸不着没有宽度没有实体的空白节点,vertical-align的默认值是baseline,图片与空白节点的baseline对齐,所以就有空白节点;
baseline介绍:
在各种内联相关模型中,凡是涉及到垂直方向的排版或者对齐的,都离不开最最基本的基线(baseline
)。例如,line-height
行高的定义就是两基线的间距;vertical-align
的默认值就是基线;其他中线顶线一类的定义也离不开基线;
字母x的下边缘(线)就是我们的基线。
CSS中有一个概念叫做"x-height"
, 指的是字母'x'
的高度。
vertical-align: middle:
middle
指的是基线往上1/2 "x-height"
高度。我们可以近似脑补成字母x
交叉点那个位置。
vertical-align: middle
并不是绝对的垂直居中对齐,我们平常看到的middle
效果只是一种近似的效果。原因很简单,因为不同的字体,其在行内盒子中的位置是不一样的,比方说’微软雅黑’就是一个字符下沉比较明显的字体,所有字符的位置相比其他字体要偏下一点。要是vertical-align: middle
是相对容器中分线对齐,呵呵,你会发现图标和文字不在一条线上,而相对于字符x
的中心位置对齐,我们肉眼看上去就好像和文字居中对齐了。
ex
是CSS中的一个相对单位,指的的是小写字母x
的高度,没错,就是指"x-height"
.
ex
的价值:不受字体字号影响的内联元素的垂直居中对齐效果。
内联元素默认是基线对齐的,而基线就是x
的底部,而1ex
就是一个x
的高度。设想下,假如我们图标高度就是1ex
, 同时背景图片居中,岂不是图标和文字天然垂直居中,而且,完全不受字体和字号的影响。因为ex
就是一个相对于字体字号的单位。
虽然使用ex
做高度实现天然垂直对齐看上去很巧妙,但是,也是有局限的,就是如果图标背景的高度超过1ex
,我们就只能使用vertical-align。
由于IE6-IE7对内联模型的解释有问题,因此,各类vertical-align
在这些浏览器下都是有问题,包括这里的ex
天然基线对齐,需要特别处理下。
让vertical-align失效:
1 修改vertical-align的值为非baseline
2 内联元素块级化
3 设置元素定位position
4 设置元素浮动 float
5 设置父元素font-size=0(如果元素的line-height是相对值),消除空白节点line-height的影响
实现img标签的垂直居中:
因为有空白节点,可以通过设置line-height来设置父元素的高度,line-height只能作用在字符上才会有高度
1 line-height 设置父元素的高度
2 设置img vertical-align为middle。这时候img近似垂直居中,因为有空白节点的影响,这时候实际上食欲空白节点的baseline对齐
3 设置父元素font-size=0;消除空白节点的影响 实现img完全的垂直居中
这种通过line-height
定高,元素vertical-align:middle
垂直居中的方法不仅适用于现代浏览器,连IE7浏览器也是支持的
不过和其他浏览器再使用上还是有些需要注意的地方,就是,HTML不能这样:
<div><img src="mm1.jpg"></div>
而是需要在图片标签结束处留下空格后者换行:
<div><img src="mm1.jpg"><!-- 这里要折行或空格 -->
</div>
来自:http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
vertical-align 和line-height 以及baseline的解析的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- How to Take Control of Your Line Height in Outlook.com
Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- 借助sass的Maps功能使得响应式代码更有条理
原文来自这里 本文综合了原文(by Jonathan Suh)以及笔者自己的理解. Introduction 众所周知,写代码与写维护性高的代码是两回事.而涉及到响应式,代码又特别容易变的杂乱.借助s ...
- height与line-height
1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...
- 查找表,Two Sum,15. 3Sum,18. 4Sum,16 3Sum Closest,149 Max points on line
Two Sum: 解法一:排序后使用双索引对撞:O(nlogn)+O(n) = O(nlogn) , 但是返回的是排序前的指针. 解法二:查找表.将所有元素放入查找表, 之后对于每一个元素a,查找 t ...
随机推荐
- [codevs3622] 假期(单调队列)
传送门 首先考虑暴力做法,可以先求一遍前缀和 sum,然后ans = max(ans, sum[i] - sum[k]) (i - q <= k <= i - p) 但这个肯定会超时. 仔 ...
- poj 2081 简单递推
#include<stdio.h> #include<string.h> #define N 510000 int dp[N]; int f[10000000]; int ma ...
- 2016 Multi-University Training Contest 1 solutions BY HIT
首先向大家表示抱歉,因为这套题是去年出的,中间间隔时间太长,今年又临时准备仓促, 所以部分题目出现了一些问题,非常抱歉. Abandoned country 首先注意到任意两条边的边权是不一样的,由此 ...
- 解决使用FusionCharts以后从后台获取数据中文乱码的问题
在使用FusionCharts 的时候 ,发现了一个非常奇怪的问题, 一旦在页面上加入一个chart组件, 不管给不给数据, 从后台取到的数据, 中文就全变成了乱码. 由于我使用的是object ar ...
- ACM-ICPC 2018 徐州赛区网络预赛 D 杜教筛 前缀和
链接 https://nanti.jisuanke.com/t/31456 参考题解 https://blog.csdn.net/ftx456789/article/details/82590044 ...
- <项目><day12>通讯录(视频)
1 需求分析(需求分析师) 功能分析: 1)添加联系人 2)修改联系人 3)删除联系人 4)查询所有联系人 2 需求设计(系统分析师/架构师/资深开发人员) 2.1设计实体(抽象实体) 联系人实体: ...
- Callable线程
写一个Callable线程 import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; im ...
- 去掉小程序textarea上的完成按钮栏
小程序textarea上会自动多一个完成按钮,如下图所示,如果是mpVue,在textarea添加 :show-confirm-bar="false" 即可.
- Android中AsyncTask使用具体解释
在Android中我们能够通过Thread+Handler实现多线程通信.一种经典的使用场景是:在新线程中进行耗时操作.当任务完毕后通过Handler向主线程发送Message.这样主线程的Handl ...
- POJ3262 Protecting the Flowers 【贪心】
Protecting the Flowers Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 4418 Accepted: ...