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. Team Work Ⅲ

    Regal-Lighting团队设计 分工思考 本次大作业我的分工定位是:Unit及子类,主要设计实现建筑类的功能. 在上一篇博客我介绍了我的继承方案和接口设定,这一篇粗略的介绍一下实现部分 Defe ...

  2. ubuntu16.04卸载火狐,Amazon

    一.卸载火狐: . dpkg --get-selections |grep firefox .sudo apt-get purge firefox unity-scope-firefoxbookmar ...

  3. python实现进制之间的转换

    十进制转36进制: #36位映射模板 loop = '0123456789abcdefghijklmnopqrstuvwxyz' # 测试用例输入 n = a = [] : a.append( loo ...

  4. SharePoint 2016 Document Center Send To Connection

    General Application setting->configure send to connection then i had to choose web application&qu ...

  5. CF708C-Centroids

    题目 一棵树的重心定义为一个点满足删除这个点后最大的连通块大小小于等于原来这颗树大小的一半. 给出一棵树,一次操作为删除一条边再添加一条边,操作结束后必须仍为一棵树.问这颗树的每个点是否可以通过一次操 ...

  6. 51nod 1674 区间的价值V2(思维+拆位+尺取法)

    最近被四区题暴虐... 题意:lyk拥有一个区间. 它规定一个区间的价值为这个区间中所有数and起来的值与这个区间所有数or起来的值的乘积. 例如3个数2,3,6.它们and起来的值为2,or起来的值 ...

  7. CODE FESTIVAL 2016 qualA Grid and Integers

    划年代久远的水 题意 有一个R*C的棋盘,要求在每个格子上填一个非负数,使得对任意一个2*2的正方形区域,左上角和右下角的数字之和等于左下角和右上角的数字之和.有一些格子已经被填上了数字,问现在能否满 ...

  8. Android 水波纹点击效果(Ripple Effect)

    上周Android发布了Android M的Preview版本.但想必Android5.0很多炫酷效果,多数开发者还没有使用过,那更不要说广大用户了. 本文介绍的是Android5.0中其中一个炫酷的 ...

  9. P2766 最长不下降子序列问题

    题目描述 «问题描述: 给定正整数序列x1,...,xn . (1)计算其最长不下降子序列的长度s. (2)计算从给定的序列中最多可取出多少个长度为s的不下降子序列. (3)如果允许在取出的序列中多次 ...

  10. 【题解】NOIP2017时间复杂度

    对大模拟抱有深深的恐惧……不过这次写好像还好?拿个栈维护一下循环的嵌套,然后重定义一下读入即可.记得去年在考场上面死活调不粗来,代码也奇丑无比……希望今年能好一点吧! #include <bit ...