中线,基线,垂直居中vertical-align:middle的一些理解
基线:小写字母xxxxx的下边缘线就是我们的css基线;一般的行内元素都是vertical-align: baseline;默认设置;
x-height:就是指小写字母xxxx的高度,下边缘线到上边缘线的高度。
中线:我们可以近似脑补成字母x
交叉点那个位置。
我们都知道,内联元素默认是基线对齐的,而基线就是x
的底部
对于vertical-align:middle
规范中对垂直对齐的middle
这么解释的:
middle: This identifies a baseline that is offset from the alphabetic baseline in the shift-direction by 1/2 the value of the x-height font characteristic. The position of this baseline may be obtained from the font data or, for fonts that have a font characteristic for “x-height”, it may be computed using 1/2 the “x-height”. Lacking either of these pieces of information, the position of this baseline may be approximated by the “central” baseline.
大意就是:middle
指的是基线往上1/2 "x-height"
高度。我们可以近似脑补成字母x
交叉点那个位置。
有此可见,vertical-align: middle
并不是绝对的垂直居中对齐,我们平常看到的middle
效果只是一种近似的效果。原因很简单,因为不同的字体,其在行内盒子中的位置是不一样的,比方说’微软雅黑’就是一个字符下沉比较明显的字体,所有字符的位置相比其他字体要偏下一点。要是vertical-align: middle
是相对容器中分线对齐,呵呵,你会发现图标和文字不在一条线上,而相对于字符x
的中心位置对齐,我们肉眼看上去就好像和文字居中对齐了。
vertical-align:middle通常用于img元素,,,只对inline,inline-block和表单元格起作用。
例子:
<div style=" background: #e3e3e3;">
<img src="test.png" style="vertical-align: middle;" width="100" height="100">xxxx测试
</div>
<!-- 1 div元素高度不固定,图片的底边默认与xxxx的底边对齐baseline,div高度119px,底下留有空隙;xxxx测试在底部;
2 div元素高度不固定,对img设置vertical-align:middle,div高度115px,底边没空隙;xxxx测试在高度的正中央;
3 div元素高度不固定,对div设置font-size:0;div高度115px,底边没空隙,但是span里的文字不显示了。
4 div元素高度固定,对于设置不设置vertical-align:middle只会改变后面文字的显示位置,默认底部,设置则中部。
-->
个人理解一行与一行的空白就是line-height减去font-size,但两者相同,上下行就没有空白了。
1
中线,基线,垂直居中vertical-align:middle的一些理解的更多相关文章
- 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 ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- div仿checkbox表单样式美化及功能
div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...
- css 居中,中央
在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必 ...
- 微信小程序中如何实现分页下拉加载?(附源码)
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- 关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别
html css <div class="register-wrapper"> <div class="register"> &l ...
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
随机推荐
- HTML邮件注意事项(转)
1.全局规则之一,不要写<style>标签.不要写class,所有CSS都用style属性,什么元素需要什么样式就用style写内联的CSS. 2.全局规则之二,少用图片,邮箱不会过滤你的 ...
- COCOS2D-X多层单点触摸分发处理方案?
如今的问题是点击button的时候,会触发底层的触摸事件,怎么不触发底层的触摸事件啊?
- solr初认识
Solr : Search On Lucene Replication Solr 基本概况 Apache Solr (读音: SOLer) 是一个开源的搜索服务器.Solr 使用 Java 语言开发, ...
- 【黑金原创教程】【Modelsim】【第三章】理想就是美丽
声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/al ...
- nat123动态域名解析软件使用教程
nat123动态域名解析软件使用教程
- Android 全局异常处理(三)
用过安卓手机的用户以及安卓开发者们会时长碰到程序异常退出的情况,普通用户遇到这种情况,肯定非常恼火,甚至会骂一生垃圾软件,然后卸载掉.那么开发者们在开发过程中遇到这种情况给怎么办呢,当然,你不可能世界 ...
- open live writer 代码着色插件
插件地址1: http://files.cnblogs.com/files/zsy/OpenLiveWriter.CNBlogs.SourceCode.zip 下载,解压,把里面的文件放到最新的 ap ...
- 170419、Centos7下完美安装并配置mysql5.6
首先跟各位说声抱歉,原计划说每天一篇博文,最近由于实在太忙,封闭式开发一个项目,没有时间写博文,望大家见谅!!! 由于公司要搭建分布式服务,我把最近我所用到或者学习的技术或者遇到的问题跟大家分享一下! ...
- 170309、MySQL存储引擎MyISAM与InnoDB区别总结整理
1.MySQL默认存储引擎的变迁 在MySQL 5.1之前的版本中,默认的搜索引擎是MyISAM,从MySQL 5.5之后的版本中,默认的搜索引擎变更为InnoDB. 2.MyISAM与InnoDB存 ...
- Jmeter--压测dubbo接口
Dubbo Interface Demo:https://blog.csdn.net/qi_lin7/article/details/53759528 Demo2:https://blog.csdn. ...