vertical-align 垂直居中
基线:字母‘x’的底部;
中线:与基线的距离为小写字母x高度的一半(即0.5ex),而ex同font-size相关,大部分浏览器认为1ex = 0.5em(em同样也是相对单位,不是绝对单位),因此会将基线以上四分之一em处作为中线来对齐
super 和 top 总归不明白,然后发现super 比 top 多5px
可能用到vertical-align大部分情况是以上这种布局,希望字与图片垂直居中
<div style="width:100%">
<img src="../../favicon.ico" width="20"/><span style="vertical-align: middle;border:none">hahha</span>
</div>
--------------------------------------------------------------------------------------------------------------------
<div style="width:100%;height:120px;border:1px solid green;line-height: 120px;">
<img src="/images/yeoman.png" style="vertical-align:middle"/>
</div>
所以说vertical-align:middle可以上下居中是错误的,居中只是因为line-height:120px;
我们可以这样垂直居中
<div style="width:100%;height:120px;border:1px solid green;display: table">
<div style="display: table-cell;vertical-align: middle;"><p>hahha</p><img src="../../favicon.ico"/div>
</div>
主要是配合 爷爷元素的display: table 父元素display: table-cell;vertical-align: middle;
还有一些绝对定位的垂直居中就不说了。
vertical-align 垂直居中的更多相关文章
- 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)为字体的高度, ...
- inline-block的垂直居中
inline-block和inline都是不需要浮动就可以成行的,但是他们成行的效果不同. inline和浮动中的block是顶着上边,inline-block是像被一根绳子从垂直方向的中心穿过去. ...
- CSS垂直居中完美有用实例
<!DOCTYPE HTML> <html> <head> <meta meta chars ...
- Objective-c——UI基础开发第十天(自动布局)
一.autoresizing 的使用(了解) 只能参照父控件 1.实现横竖屏幕切换,不能把控件的frame血丝,需要进行屏幕适配 2.需要参照父控件 use auto layout禁用 才会出现aut ...
- 对CSS居中的一点总结
在学习前端的过程中,发现元素和文本的水平居中和垂直居中,是经常会出现的问题,在实际工作中也会经常碰到.居中的技巧有很多,但在编写代码的过程中,发现有时候技巧管用,有时候不管用,于是就将每个知道的方案都 ...
- CSS 居中效果完整指南
本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
随机推荐
- .net 制作二维码
首先 要下载 ThoughtWorks.QRCode.dll 下载地址:http://download.csdn.net/detail/lybwwp/6861821 然后新建项目 把Thought ...
- hashmap两种遍历方法
第一种:使用entryset来进行遍历 Map map=new HashMap(); Iterator iter=map.entrySet().iterator(); while(iter.hasNe ...
- CSS3 动画实现 animation 和 transition 比较
在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...
- Sublime Text 3 使用
Sublime Text3使用 下载安装 参考:http://www.downza.cn/soft/187996.html Sublime Text Build 3126 x64 Setup.exe下 ...
- PCI Express(五) - Xilinx wizard
原文地址:http://www.fpga4fun.com/PCI-Express5.html Xilinx makes using PCI express easy - they provide a ...
- Li-Fi,LED光无线局域网
无需WiFi信号,点一盏LED灯就能上网.昨天,复旦大学计算机科学技术学院传出好消 息,一种利用屋内可见光传输网络信号的国际前沿通讯技术在实验室成功实现.研究人员将网络信号接入一盏1W的LED灯珠,灯 ...
- PHPCMS V9 分页类的修改教程
首先,打开 phpcms\libs\functions\global.func.php 这个文件,找到文件第622行的分页函数,复制一下,粘贴到默认分页函数的下面,重新命名后保存.(笔者在此命名为:p ...
- 修改tomcat应用日志默认编码格式
前言 今天开发跟我说tomcat日志中的中文不能正常显示,根据以往的经验,我觉得可能跟服务器的编码有关,于是尝试各种方法,但还是没能解决问题. 后来我突然想到会不会跟tomcat的设置有关呢,于是在网 ...
- Python 3.5安装JPype
使用命令pip install jpype1可安装jpype. 如果出现如下情况: creating build\lib.win-amd64-3.5\jpypex copying jpypex\__i ...
- Ajax完整结构和删除
1.ajax完整结构 注意:(1)最后一个没有"," (2)ajax对网速要求高,最好有各种提示和使用按钮(可使其失效,防止重复加载) $.ajax({ url: "aj ...