以前总是以为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. 【ASP.NET MVC 学习笔记】- 03 Razor语法

    本文参考:http://www.cnblogs.com/willick/p/3224144.html 1.Razor语句以@开头. 2.每个View都有自己的Model属性,可通过@Model调用.语 ...

  2. mybatis mysql 批量插入

    场景描述: 使用mybatis操作mysql数据库,进行批量插入数据,提高代码质量和执行效率. 环境: mybatis spring mysql java xml配置文件 <insert id ...

  3. CentOS 升级 Python3 （附带: 一键升级脚本）

      升级环境   应用名称 版本 Python 3.5.2 Syatem CentOS 6.7         升级方法   [1]下载 Python 3: wget http://mirrors.s ...

  4. excel中添加拼接行

    Sub 万途标签()Dim iFor i = 1 To Sheets.Count    If Sheets(i).Name = "数据表" Then        If MsgBo ...

  5. Linux系列教程（六）——Linux文件搜索命令

    前一篇博客我们讲解了Linux链接命令和权限管理命令, 通过 ln -s  链接名 表示创建软链接,不加-s表示创建硬链接:还有三个更改权限的命令,chmod命令可以更改文件或目录权限,chown命令 ...

  6. hadoop集群服务器配置注意事项

    1.使用root账户,一劳记逸,远离权限问题. 2.关闭防火墙,命令:service iptables stop 想永久关闭,命令为:chkconfig iptables off 查看防火墙状态,命令 ...

  7. Python Web框架篇：Django Form组件

    Form简介 在HTTP中,表单(form标签),是用来提交数据的,其action属性说明了其传输数据的方法:如何传.如何接收. 访问网站时,表单可以实现客户端与服务器之间的通信.例如查询,就用到了表 ...

  8. Codeforces 376A. Night at the Museum

    A. Night at the Museum time limit per test 1 second memory limit per test 256 megabytes input standa ...

  9. [Bayesian] “我是bayesian我怕谁”系列 - Boltzmann Distribution

    使用Boltzmann distribution还是Gibbs distribution作为题目纠结了一阵子,选择前者可能只是因为听起来“高大上”一些.本章将会聊一些关于信息.能量这方面的东西,体会“ ...

  10. webmagic学习-使用注解编写爬虫

    写在前面: 官方文档:http://webmagic.io/docs/zh/posts/ch5-annotation/README.html WebMagic支持使用独有的注解风格编写一个爬虫,引入w ...