vertical-align:middle的居中细节调整
使用vertical-align:middle可以让行级元素垂直居中，但这个居中是以文字的中线来计算的，而文字的中线在不同的字体上不同，甚至相同的字体在不同的浏览器上显示的都不同。所以直接使用vertical-align:middle很难完美居中，因此需要其它调整。运行<!DOCTYPE html>
<style>
div {
border:1px solid red;
width:200px;
height:100px;
line-height:100px;
text-align:center;
}
span {vertical-align:middle;}
#box {
display:inline-block;
width:100px;
height:98px;
background:#EEE;
}
</style>
<div>
abc<span id="box"></span>def
</div>
当容器内存在vertical-align:middle元素时，它们的中线会被对其到所在行的基线上。而所在行的基线未必是中线，基线与中线偏离的距离就是vertical-align:middle垂直居中时候出现的偏离距离。
基线与中线的位置差异会受到字体、字形、字号，等影响。而且在不同浏览器上字体的渲染还存在差异，这样就不容易计算具体的偏差。但我们可以取消掉基线和中线的位置差，做法是将字号改到0，也就是不在行中直接使用文本节点。运行<!DOCTYPE html>
<style>
div {
border:1px solid red;
width:200px;
height:100px;
line-height:100px;
text-align:center;
font-size:0px;
}
span {
vertical-align:middle;
display:inline-block;
font-size:1rem;
}
#box {
width:100px;
height:98px;
background:#EEE;
}
</style>
<div>
<span>abc</span><span id="box"></span><span>def</span>
</div>
vertical-align:middle的居中细节调整的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 各种div+css居中方式调整（转载）
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- echarts使用------地图生成----省市地图的生成及其他相关细节调整
为使用多种业务场景,百度echarts地图示例只有中国地图,那么在使用省市地图的时候,就需要我们使用省市的地图数据了 以下为陕西西安市的地图示例: 此页面引用echarts的js:http://ech ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- webim-界面细节调整
1)左侧css调整 3)界面和滚动条美化 8)界面
- 浏览器兼容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 居中，中央
在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必 ...
- div仿checkbox表单样式美化及功能
div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...
随机推荐
- Boost库学习之旅入门篇
学习及使用Boost库已经有一段时间了,Boost为我的日常开发中带来了极大的方便,也使得我越来越依赖于boost库了.但boost功能太多,每次使用还是得翻看以前的 资料,所以为了以后可以更方便的使 ...
- C++类对应的内存结构
提示1:对“内存结构”表示有疑问或不解的,先参考: http://blog.csdn.net/guogangj/archive/2007/05/25/1625199.aspx, 本文使用的表示方法和V ...
- linux之SQL语句简明教程---函数
既然数据库中有许多资料都是已数字的型态存在,一个很重要的用途就是要能够对这些数字做一些运算,例如将它们总合起来,或是找出它们的平均值.SQL 有提供一些这一类的函数.它们是: AVG (平均) COU ...
- linux命令之pwd(print working drectory)
Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文件系统内的确切位置. ...
- HDU 2517 / POJ 1191 棋盘分割 区间DP / 记忆化搜索
题目链接: 黑书 P116 HDU 2157 棋盘分割 POJ 1191 棋盘分割 分析: 枚举所有可能的切割方法. 但如果用递归的方法要加上记忆搜索, 不能会超时... 代码: #include& ...
- Linux下将多个静态库(.a)合并成一个静态库文件(.a)的命令操作，方法一
.a 文件的结构和.tar文件就没有什么区别. x 命令解出来, a 命令添加, t命令列表 假设A.a, B.a C.a 在/usr/local/lib目录下 mkdir /tmp/libABC c ...
- Number Sequence（kmp）
Number Sequence Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- hunnu11543:小明的烦恼——分糖果
Problem description 小明在班里一直是个非常公正的孩子.这点同学和老师都非常清楚,这不,老师每周都会从家里带来一些糖果.然后叫小明把糖果分给其它小朋友,但这个班里的同学都有一个非 ...
- 卸载mysql残留
一.在控制面板中查看是否有mysql,有则进行卸载.或执行同样版本号的mysql安装文件,选择"remove"进行卸载. 二.卸载mysql后其服务仍在,解决的方法: 点击&quo ...
- Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。
http://v3.bootcss.com/ 从2.x升级到3.0版本 Bootstrap 3并不向后兼容Bootstrap v2.x.下面章节列出的内容可以作为从v2.x升级到v3.0的通用指南.如 ...