vertical-align对一些特定显示样式（例如单元格显示方式：table-cell）的元素才会起作用。

div{display:table-cell; vertical-align:middle;}

vertical-align只对行内元素有效，对块级元素无效。

语法：

vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | inherit

baseline：基线对齐；sub：下标；super：上标；top：顶端对齐；text-top：与文本的顶端对齐；middle：中部对齐；bottom：底端对齐；

垂直居中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. inline-block的垂直居中

    inline-block和inline都是不需要浮动就可以成行的,但是他们成行的效果不同. inline和浮动中的block是顶着上边,inline-block是像被一根绳子从垂直方向的中心穿过去. ...

  6. Img垂直居中

    IMG垂直居中问题 2011-02-22 10:51:00|  分类: CSS |  标签:垂直居中  div  align  img  vertical  |举报|字号 订阅    转载来自:htt ...

  7. CSS垂直居中完美有用实例

    <!DOCTYPE HTML>           <html>            <head>             <meta meta chars ...

  8. 对CSS居中的一点总结

    在学习前端的过程中,发现元素和文本的水平居中和垂直居中,是经常会出现的问题,在实际工作中也会经常碰到.居中的技巧有很多,但在编写代码的过程中,发现有时候技巧管用,有时候不管用,于是就将每个知道的方案都 ...

  9. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  10. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. vs调试iisExpress经常卡死

    最近调试一个项目时,电脑经常卡死,不得不强制重启,一直不知道iisExpress为何卡死的. 想了很多办法,强制删除bin里面的文件,结果不行: 企图删除iisExpress虚拟目录中的文件也不行: ...

  2. bat获取当前日期的前一天

    批处理做这样的事情很麻烦,你可以用cscript来实现,比如把下面的内容保存为a.js文件:var d=new Date();d.setTime(d.getTime()-24*3600*1000);v ...

  3. lintcode-129-重哈希

    129-重哈希 哈希表容量的大小在一开始是不确定的.如果哈希表存储的元素太多(如超过容量的十分之一),我们应该将哈希表容量扩大一倍,并将所有的哈希值重新安排.假设你有如下一哈希表: size=3, c ...

  4. PAT 甲级 1019 General Palindromic Number

    https://pintia.cn/problem-sets/994805342720868352/problems/994805487143337984 A number that will be ...

  5. testng几种写法

    testng几种写法: 1 <!--运行-类--> 2 <?xml version="1.0" encoding="UTF-8"?> 3 ...

  6. ubuntu通过apt-get方式搭建lnmp环境以及php扩展安装

    v 一直是在用的lnmp的集成安装包搭建lnmp环境,因为工作需要需要安装ldap扩展,在网上怎么都找不到源码安装包,只能卸载掉原来的lnmp环境,用ubuntu的php5-ldap扩展, 在安装中遇 ...

  7. Git回滚merge操作

    执行完merge操作后,没有修改代码 1.命令 ⑴ git reflog 查看merge操作的上一个提交记录的版本号 ⑵ git reset –hard 版本号 这样可以回滚到merge之前的状态 2 ...

  8. elsarticle模板 去掉摘要前后的两条横线

    参考:http://www.newsmth.net/nForum/#!article/TeX/316697?au=ericfire 如图:使用elsarticle模板修改PDF格式,去掉摘要前后的横线 ...

  9. 使用StoryBoard执行动画

    在WPF动画编程中,最常用的动画处理方式是DoubleAnimation动画,但是随着你的开发经验越来越多,你会发现,有时候使用这个动画类会很麻烦,因为这个动画是封闭动画,也就是说在动画的时间间隔内, ...

  10. Unity3D for VR 学习(9): Unity Shader 光照模型 (illumination model)

    关于光照模型 所谓模型,一般是由学术算法发起, 经过大量实际数据验证而成的可靠公式 现在还记得2009年做TD-SCDMA移动通信算法的时候,曾经看过自由空间传播模型(Free space propa ...