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. node begining

    node begining */--> pre { background-color: #2f4f4f;line-height: 1.6; FONT: 10.5pt Consola," ...

  2. 虚拟机之仅主机模式（HostOnly）链接外网设置

    我的环境: 虚拟机-VMware 虚拟系统-CentOS 现实主机-win7 具体设置步骤: 一.设置现实主机 (地址等不用额外设置,下面是我电脑正常上网的配置) 将本地链接设置共享(这步很重要) 二 ...

  3. 4 weekend110的hive入门

    查看企业公认的最新稳定版本:       https://archive.apache.org/dist/  Hive和HBase都很重要,当然啦,各自也有自己的替代品. 在公司里,SQL有局限,大部 ...

  4. PTA 06-图3 六度空间 (30分)

    "六度空间"理论又称作"六度分隔(Six Degrees of Separation)"理论.这个理论可以通俗地阐述为:"你和任何一个陌生人之间所间隔 ...

  5. 04、生成 HTMLTestRunner 测试报告

    1.HTMLTestRunner 是 Python 标准库的 unittest 模块的一个扩展.它生成易于使用的 HTML 测试报告 1>下载HTMLTestRunner.py文件,地址为: h ...

  6. C# 保存和读取TreeView展开的状态

    附件 http://files.cnblogs.com/xe2011/ReadAndSaveTreeViewState.rar 保存和读取TreeView展开的状态  节点{ImageIndex,Is ...

  7. cocos2d-x 2.0.3 设置高清模式注意事项（已移除-hd方式）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=304 在cocos2d-x 2. ...

  8. PureMVC(JS版）源码解析（一）：观察者模式解析

          假设一种情景,在程序开发中,我们需要在某些数据变化时,其他的类做出相应,例如在游戏中,升级一件装备,会触发玩家金币数量改变,背包数据改变和冷却队列数据改变等等.我们不可能设置setInte ...

  9. j2ee学习笔记 Filter过滤器

    作用:过滤response和request对象的内容 使用: Filter是J2EE的一个接口,自定义Filter需要实现该接口,并重写所有的方法. Filter提供的方法: init() doFil ...

  10. App升级时数据库的迁移更新

    前一段时间在进行App升级的时候,由于一开始版本初期没有考虑完善,导致走了很多弯路,后来经过自己的一些思考,总结出了一些在app升级的时候,数据库内文件同步保持更新的经验,希望能给大家带来帮助. 总体 ...