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: ...
随机推荐
- 任何时候都适用的20个C++技巧
这些小技巧之所以特别,是因为这些信息通常吧不能在C++书籍或者网站上找到.比如说,成员指针,即使对于高级程序员也是比较棘手,和易于产生bugs的,是应该尽量避免的问题之一. <翻 by凌云健笔& ...
- Chrome for Android在Chromium代码库中的提交patch
訪问这个地址: https://codereview.chromium.org/1141283003 主要分为3类:png资源文件.java代码.C++代码,曾经以为这部分不开源的代码主要是C++,事 ...
- 有一种设计风格叫RESTful
一 前言 刚看了<RESTful Web APIs中文版>.试读了前两章. 每本书的第一章都是抽象得不得了,是整本书的总结:开篇说基础有点简单,从教你怎么向地址栏输入地址訪问网页開始(某人 ...
- .NET系统架构改造的经验和教训
转自: http://robbinfan.com/blog/43/rid-off-dotnet-experience 在互联网行业,基于Unix/Linux的网站系统架构毫无疑问是当今主流的架构解决方 ...
- hadoop结构出现后format变态
14/07/10 18:50:47 FATAL conf.Configuration: error parsing conf file: com.sun.org ...
- 好用的侧边栏菜单/面板jQuery插件
我想大家都用过一些APP应用,它们的菜单展示是以侧边栏滑动方式展现,感觉很新鲜,而现在网页设计也是如此,不少网站也效仿这样的方式来设计.使用侧边栏的好处就是可以节约空间,对于一些内容多或者喜欢简约的网 ...
- docker相关配置
一.概述: 1.centos7下,默认firewalld为防火墙, systemctl status firewalld.service 2.关闭firewalld, systemctl stop f ...
- vbox下安装 linux 64 bit出现“kernel requires an x86_64 cpu
今天在vbox下安装linux 64bit出现"kernel requires an x86_64 cpu, but only detected "的错误,网上有很多文章介 ...
- 随机抽样一致性算法（RANSAC）
本文翻译自维基百科,英文原文地址是:http://en.wikipedia.org/wiki/ransac,如果您英语不错,建议您直接查看原文. RANSAC是"RANdom SAmple ...
- Javascript 常用代码总结
1. document.referrer可以获得上一页的地址,使用document.anchors获得页面上面所有的链接元素,而不必使用 document.getElementsByTagName(' ...