vertical-align对一些特定显示样式（例如单元格显示方式：table-cell）的元素才会起作用。所以要实现上下垂直居中对齐，可以采用如下样式

display:table-cell;      /*按照单元格的样式显示元素*/
vertical-align:middle;   /*垂直居中对齐*/

  • 上面的设置方式相比设置line-height属性，可以兼容文字有多行的情形。

下面举例说明：

  1. 创建Html元素

    <div>
    	<span>测试测试，即便是多行，我也还是垂直居中对齐的。</span>
    </div>

  2. 设置css样式

    div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;

  3. 观察显示效果

利用table-cell实现元素居中对齐的更多相关文章

  1. 利用负margin实现元素居中

    原理就是对当前元素的position设置为absolute并且相对于父元素定位,先设置left:50%;top:50%使当前元素的左上角处于父元素的中心位置,之后再应用负margin特性使其中心位于父 ...

  2. H5C3--transform实现任何元素居中对齐

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

  3. 【CSS】定义元素的对齐方式

    1.文本内容居中对齐:text-align.扩展用法:父元素嵌套子元素时,且子元素的宽度小于父元素宽度,使用text-align:center,可以实现子元素的居中对齐. <!DOCTYPE h ...

  4. 网页元素居中的n种方法

    导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...

  5. CSS居中对齐

    CSS实现居中对齐的几种方式 页面布局中,居中对齐是我们经常遇到的场景,现在总结几个常用的方式供大家参考. 场景一:按钮文字居中对齐,line-height + text-align html代码: ...

  6. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）

    body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

  7. 利用CSS实现居中对齐

    1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: <div class="parentDiv"> 这里随 ...

  8. CSS上下左右居中对齐

    上下左右居中对齐 display:  inline/inline-block 将父元素(容器)设定 text-align: center: 即可左右置中. display: block 将元素本身的 ...

  9. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

随机推荐

  1. CentOS6.4下Samba服务器的安装与配置

    一.先恶狠狠地吐槽一下: 这篇随笔真是让我折腾了2天2夜才敢下笔写!!!为什么呢?之前是通过去Samba的官网下载的源码包,也就是.tar.gz来进行安装配置,不过这个让我折腾来折腾去就是没折腾出结果 ...

  2. MFC获得主窗体和父窗体指针

    MFC编程中经常遇到子窗体向父窗体传递參数的情况,这就须要获得父窗体的指针. 例:主对话框CMyMainDlg通过buttonButtonA进入对话框CMyParentDlg.CMyParentDlg ...

  3. 锁Lock的概念

    并发访问同一资源的功能,需要引入锁Lock的概念,也就是说,某个时刻,当有一个访问类访问这个数据对象时,这个数据对象必须上锁Locked,用完后就立即解锁unLocked,再供其它访问类访问.

  4. webpack css打包为一个css

    1.安装 npm install extract-text-webpack-plugin --save-dev 2.项目目录: index文件夹下的index.css: body{ backgroun ...

  5. webpack 引入jquery和第三方jquery插件

    1.引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可. index.html: <!DOCTYPE html> <html> ...

  6. 编程算法 - 翻转单词顺序 代码(C)

    翻转单词顺序 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 输入一个英文句子, 翻转句子中单词的顺序, 但单词内字符的顺序不变. 首先翻转(r ...

  7. Linux命令-目录处理命令:mv

    注意:在linux下面,剪切文件和改名是同一个命令mv,而不是两个独立的命令. mv /tmp/beijing/chaoyangqu /root 移动chaoyangqu目录到root目录下面 mv ...

  8. Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17539199),请尊重他人的辛勤劳动成果,谢谢! 我在上一 ...

  9. script的延迟执行

    看这段代码: <body> <script src="deffer.js"></script> content </body> de ...

  10. mark v1 SecurityConfig

    package cn.efunbox.cms.configuration; import cn.efunbox.afw.core.entity.ApiCode; import cn.efunbox.a ...