vertical-align的深入学习
W3C官方对vertical-align属性的定义有4个方面：
（1）vertical-align属性用于定义“周围的文字、inline元素以及inline-block元素”相对于该元素基线的垂直对齐方式。这里的“该元素”指的是被定义了vertical-align属性的元素；
（2）在表格单元格中，vertical-align属性可以定义单元格td元素中内容的对齐方式。td元素是table-cell元素，也就是说vertical-align属性对table-cell类型元素有效；
（3）vertical-align属性对inline元素、inline-block元素和table-cell元素有效， 对block元素无效；
（4）vertical-align属性允许指定负长度值（如-2px）和百分比值（如50%）；
vertical-align属性中的“基线”跟line-height属性中的基线是一样的道理。在CSS中，vertical-align属性最见的属性值有4个：top（顶部对齐）、middle（中部对齐）、baseline（基线对齐）、bottom（底部对齐）。
table-cell元素
W3C定义：在表格单元格中，vertical-align属性可以定义单元格中内容的对齐方式。也就是说vertical-align属性对table-cell类型元素有效。
这里要注意一下，table-cell元素跟inline、inline-block元素使用vertical-align是有很大区别的：
（1）inline元素和inline-block元素的vertical-align是针对周围的元素来说，vertical定义的是周围元素相对于当前元素的对齐方式；
（2）table-cell元素的vertical-align属性是针对自身而言。vertical-align定义的是内部子元素相对于自身的对齐方式；
<html>
<head>
<meta charset="UTF-8">
<title>闭包经典题型</title>
</head>
<style>
/*vertical-align属性对inline元素、inline-block元素和table-cell元素有效， 对block元素无效；*/
div{
width: 500px;
height: 500px;
border:1px solid red;
display: table-cell;/*设置了table-cell元素，vertical-align定义的是内部子元素相对于自身的对齐方式*/
vertical-align: middle;
}
img{
vertical-align:middle;/*img是inline元素，inline元素和inline-block元素的vertical-align是针对周围的元素来说，vertical定义的是周围元素相对于当前元素的对齐方式*/
}
</style>
<body>
<div>我是文字<img src="img/bike-1.jpg" alt="">我是文字</div>
</body>
</html>
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)为字体的高度, ...
- HighCharts学习笔记（一）HighCharts入门
一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...
- [笔记]学习HighCharts的使用（不错的web图表插件）
最近有一个小项目需要用到折线图.到处请教了一下,有人给我推荐了highcharts.感觉还不错,就稍微学习下.这里记录一下学习的过程. 网上相关的内容还不少,我就说一下我学习的内容. 看的第一篇文章& ...
- CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- HTML之学习笔记（八）表格
Html的表格使用table标签.table标签含有tr(table row)子标签,tr又含有th(table head)和td(table data)子标签这样的嵌套结构 代码演示 <tab ...
- 模式识别笔记4-集成学习之AdaBoost
目前集成学习(Ensemble Learning) 分为两类: 个体学习器间存在强依赖关系.必须串行化生成的序列化方法:Boosting 个体学习器间不存在强依赖关系,可同时生成的并行化方法:Bagg ...
随机推荐
- phpeclipse xdebug 配置配置 -摘自网络
一.安装配置 1.访问 http://www.phpeclipse.com/ ,找到右边的 1.2.x dev nightly下的http://update.phpeclipse.com/update ...
- zoj3329 One Person Game
One Person Game Time Limit: 1 Second Memory Limit: 32768 KB Special Judge There is a very simple and ...
- Yii 通过composer 安装的方法
Yii2框架可以通过两种方式 安装 : 第一种方法: Yii2有两个模板 一个是基础模板,一个是高级模板,基础可能简单点吧.........,现在直接从 https://github.com/yi ...
- Mina学习之IoSession
Session(会话)是Mina的核心部分:每当一个clinent连接到server时,都会创建一个新的session,并且保存在内存中知道该链接断开. session 是用来存储一些关于连接信息,加 ...
- ios 利用Reveal来调试界面2--真机调试（步骤详解）
使用真机调试我们的App界面,如果你的真机是没有越狱的设备,那么使用Reveal来调试UI的步骤是最麻烦的.
- [Oracle] - 性能优化工具（1） - AWR
AWR快照 默认情况下,Oracle每隔一小时会自己主动产生一个快照,保存近期8天的快照. 我们能够通过例如以下语句获得产生快照的时间间隔和保存的天数: SYS@orcl(lx15)> sele ...
- 模仿微信"转你妹"游戏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【NodeJs】用arrayObject.join('')处理粘包的错误原因
服务器测试代码如下: var net = require('net'); var server = net.createServer(function(c){ console.log('client ...
- JDBC学生管理系统--处理分页显示
分页的思想: 假设一共有104条数据,每页显示10条数据: select * from student limit 0,10; 页数是index,第index页,对应的sql语句是: select * ...
- 为什么每个请求都要有用户名密码呢，那不是每次都要查询一下了，token，表示这个用户已经验证通过了，在token有效期内，只需要判断token是否有效就可以了
为什么每个请求都要有用户名密码呢,那不是每次都要查询一下了,token,表示这个用户已经验证通过了,在token有效期内,只需要判断token是否有效就可以了