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. sublime text 2 运行 python时返回EOFError: EOF when reading a line错误

    其主要原因是sublime text 2中python没有与 stdin(标准输入)连接所致,解决方法也很简单,那就是安装sublimeREPL插件,然后 Tools->sublimerepl- ...

  2. Centos6.4 openNebula

    OpenNebula 是一套开源的云计算基础管理工具,用来方便管理员在数据中心统一部署.创建.分配和管理大量的虚拟机,企业数据中心可以利用这套工具搭建自己的私有云,为 自己内部提供 IaaS 服务,类 ...

  3. weekend110（Hadoop）的 第二天笔记

    (2015年1月11日) 课程目录 01-NN元数据管理机制 02-NN工作机制2 03-DN工作原理 04-HDFS的JAVA客户端编写 05-filesystem设计思想总结 06-hadoop中 ...

  4. linux diff详解

    diff是Unix系统的一个很重要的工具程序. 它用来比较两个文本文件的差异,是代码版本管理的基石之一.你在命令行下,输入: $ diff <变动前的文件> <变动后的文件> ...

  5. Spring Aop重要概念介绍及应用实例结合分析

    转自:http://bbs.csdn.net/topics/390811099 此前对于AOP的使用仅限于声明式事务,除此之外在实际开发中也没有遇到过与之相关的问题.最近项目中遇到了以下几点需求,仔细 ...

  6. Winfrom 如何安全简单的跨线程更新控件

    来源:http://www.cnblogs.com/rainbowzc/archive/2010/09/29/1838788.html 由于多线程可能导致对控件访问的不一致,导致出现问题.C#中默认是 ...

  7. sql执行计划解析案例（二）

    sql执行计划解析案例(二)   今天是2013-10-09,本来以前自己在专注oracle sga中buffer cache 以及shared pool知识点的研究.但是在研究cache buffe ...

  8. Java数据库连接代码集合(转)

    Java数据库连接接口(JDBC)是Java里定义的一套用于数据库连接和操作的API的集合.有不同的数据库厂商提供这套接口的实现类,对于 Java程序员来说,程序员不需要关心数据库的底层的实现,统一的 ...

  9. trace openjdk from systemtap

    here are several different tactics to trace openjdk from systemtap. The first relies on sys/sdt.h dt ...

  10. NETBSD-DTARCE

    http://www.openbsd.org/papers/ https://2015.asiabsdcon.org/timetable.html.en#T3A http://teachbsd.org ...