以前总是以为vertical-align与text-align是同样的道理，一个是垂直居中，一个是水平居中，结果在这里一点效果也没有。事实上vertical-align与text-align完全不一样，vertical-align不能这样用。

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。默认值：baseline，元素放置在父元素的基线上。

第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。

第二种用法，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素a和b，a和b都是div，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：

如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：

现在我要让class="box"的div在class="wrapper"的div里面垂直居中，我可以在class="wrapper"的div里面加一个div空标签，把它的高度设为100%，宽度设置为0，再给它一个vertical-align:middle样式，同样的给class="box"的div一个vertical-align:middle样式，那么box就可以在div里面垂直居中了。

 1 <style>

 2     .wrapper {

 3         width: 200px;

 4         height: 200px;

 5         background-color: green;

 6

 7         margin: 0 auto;

 8         text-align: center;

 9     }

10

11     .help {

12         width: 0;

13         height: 200px;

14

15         display: inline-block;

16         vertical-align: middle;

17

18     }

19     .content {

20         width: 100px;

21         height: 100px;

22         background-color: yellow;

23

24         vertical-align: middle;

25         display: inline-block;

26

27     }

28

29 </style>

30 </head>

31 <body>

32     <div class="wrapper">

33         <div class="help"></div>

34         <div class="content"></div>

35     </div>

36

37 </body>

下面我们来看一张图来更好理解垂直对齐主要属性值的表现形式

利用vertical-align:middle垂直居中的更多相关文章

  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. CSS样式 vertical-align:middle 垂直居中生效情况

    vertical-align:middle  是依赖div内子元素最高的行高来实现对某元素居中的 -------不存在浮动时可以直接生效垂直居中 HTML .box1{ display: table- ...

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

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

  5. 关于Vertical Align的理解

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

  6. Ext.js高级组件

    第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...

  7. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  8. css 居中，中央

    在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必 ...

  9. 微信小程序中如何实现分页下拉加载？（附源码）

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

随机推荐

  1. 自学LinkedBlockingQueue源码

    自学LinkedBlockingQueue源码 参考:http://www.jianshu.com/p/cc2281b1a6bc 本文需要关注的地方 生产者-消费者模式好处: 读取和插入操作所使用的锁 ...

  2. JAVA基础知识总结：五

    一.初步认识数组 1.理解数组 数组是用来存储相兼容数据类型的定长的容器 特点: a.只能存放相兼容数据类型,不能存放多种数据类型 b.可以存放基本数据类型和引用数据类型 c.数组是定长的,一旦被初始 ...

  3. 2.动手实操Apache ZooKeeper

    Tips 做一个终身学习的人! 日拱一卒,功不唐捐. 在本节中,我们将讲解如何下载并安装Apache ZooKeeper,以便我们可以直接开始使用ZooKeeper. 本部分旨在通过提供详细的安装和使 ...

  4. 初学者Web介绍一些前端开发中的基本概念用到的技术

    Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...

  5. MUI点击事件获取当前对象，及当前对象的属性值

    //用惯了jquery,开始用mui还是有些不习惯 //直接贴代码吧 <nav class="mui-bar mui-bar-tab"> <a class=&qu ...

  6. HDU 6055 Regular polygon

    Regular polygon Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  7. Problem E 

    Problem Description 省政府"畅通工程"的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可).现得到城镇道路统计 ...

  8. C# let 子句

    在查询表达式中,存储子表达式的结果有时很有帮助,可在后续子句中使用. 可以通过 let 关键字执行此操作,该关键字创建一个新的范围变量并通过提供的表达式结果初始化该变量. 使用值进行初始化后,范围变量 ...

  9. DOM Exception error 类型

    INDEX_SIZE_ERR  code 1                              索引是负值,或者超过了索引值 DOMSTRING_SIZE_ERR  code 2       ...

  10. HTML学习笔记 div布局及table布局案例 第三节 （原创）参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...