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的深入学习的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  3. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  4. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  5. HighCharts学习笔记（一）HighCharts入门

    一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...

  6. [笔记]学习HighCharts的使用（不错的web图表插件）

    最近有一个小项目需要用到折线图.到处请教了一下,有人给我推荐了highcharts.感觉还不错,就稍微学习下.这里记录一下学习的过程. 网上相关的内容还不少,我就说一下我学习的内容. 看的第一篇文章& ...

  7. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  8. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  9. HTML之学习笔记（八）表格

    Html的表格使用table标签.table标签含有tr(table row)子标签,tr又含有th(table head)和td(table data)子标签这样的嵌套结构 代码演示 <tab ...

  10. 模式识别笔记4-集成学习之AdaBoost

    目前集成学习(Ensemble Learning) 分为两类: 个体学习器间存在强依赖关系.必须串行化生成的序列化方法:Boosting 个体学习器间不存在强依赖关系,可同时生成的并行化方法:Bagg ...

随机推荐

  1. Linux常用命令收集

    rsync -avH --progress felix/ /home/magnum/work-environment/ 同步本地文件夹,异常中断后仍然可以续传 rsync -avH --progres ...

  2. [置顶] 分析Java死锁:分析jstack日志

    本文中我将展示一段垃圾代码,这段代码会产生死锁,这样围绕这段代码重点展示三种不同的方法来分析线程日志,从而得知什么地方有问题. 下面的讨论将用到两个类 Account 和 DeadlockDemo c ...

  3. Mockito测试

    Mockito 一 mockito基本概念 Mock测试是单元测试的重要方法之一,而Mockito作为一个流行的Mock框架,简单易学,且有非常简洁的API,测试代码的可读性很高. Mock测试就是在 ...

  4. eclipse+tomcat+httpServlet初学

    1.在eclipse中配置tomcat,参考上一边文章,建立的web项目tomcatWeb目录结构 2.添加Servlet处理类 3. 实现doGet()与doPost()方法: <span s ...

  5. 理解阻止浏览器默认事件和事件冒泡cancelBubble

    一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...

  6. Android Butterknife框架配置

    一.原理. 最近发现一个很好用的开源框架,蛮不错的,可以简化你的代码,是关于注解的.不多说直接进入使用步骤讲解. 二.步骤. 1.准备阶段,先到官网( http://jakewharton.githu ...

  7. 日志分析（php+nosql+rsync+crontable）

    是不是经常要分析用户的行为?是不是经常遇到多台server上传的日志一起分析?是不是对数据统计的间隔时间要求非常短?还有木有由于日志文件过大,而须要分块处理? 1.说明一点在日志写入的时候必须依照一种 ...

  8. redis学习大全

     http://blog.csdn.net/menergy/article/details/17577985 http://blog.sina.com.cn/s/blog_64008ed70102uy ...

  9. 第一个Xcode项目 - 代码修改布局约束

    第一行的选中效果已经有了,那第二行的选中效果怎么做呢?我这里选择改变布局约束来实现选中效果 [我有个用object-c做APP的同事他说,我觉得这个应该去获取色块的位置,然后赋给选中用的View,然后 ...

  10. MYSQL 学习笔记1 -----mysqladmin -uroot -p status|extended-status

    root@server1 ~]# mysqladmin -uroot -p status -i -r extended-status|grep Handler_commit Enter passwor ...