.GoodList{
display :table;
height :54px;
width :56px;
line-height: 14px
                padding: 0 12px
.text{
display: table-cell;
                width: 56px;
                vertical-align: middle;
                font-size: 12px;
                color: rgb(77, 85, 97); 
}
 
将父容器设为display:table然他成为一个块级表格元素,子元素display:table-cell使子元素成为表格单元格,然后就像在表格里一样,给子元素加个vertical-align: middle就行了,就可以实现多行文字垂直居中

display:table和display:table-cell结合使用的更多相关文章

  1. 由table理解display:table-cell

    转载自:https://segmentfault.com/a/1190000007007885 table标签(display:table) 1) table可设置宽高.margin.border.p ...

  2. table使用display:block时会多出一条边框

    在静态页面中添加一个table,然后设置table的显示隐藏,当使用display:block显示table时出现了如下情况,详情请点击链接: http://jsbin.com/pinovorahu/ ...

  3. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  4. display:box和display:inline-box的区别

    display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. OpenFlow Switch学习笔记(五)——Group Table、Meter Table及Counters

    本文主要详述OpenFlow Switch的另外两个主要组件——Group Table和Meter Table,它们在整个OpenFlow Swtich Processing中也起到了重要作用. 1. ...

  7. delete table 和 truncate table

    delete table 和 truncate table 使用delete语句删除数据的一般语法格式: delete [from] {table_name.view_name} [where< ...

  8. CSS3 display:flex和display:box有什么区别?

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

  9. display:box;display:flex;弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  10. display:flex和display:box布局浏览器兼容性分析

    display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...

随机推荐

  1. JavaScript的数据类型---最全,最详细的数据类型,高级的工程师从数据类型开始

    一.基本数据类型 1.字符串数据类型     var hello="你好啊";     var hello='你好啊';示例:<script language="j ...

  2. 基础知识《零》---一张图读懂JDK,JRE,JVM的区别与联系

  3. Windows 系统提示“内存不足”的原因及解决方法

         Windows 系统提示“内存不足”的原因及解决方法 windows XP vista 及windows 7系统的电脑有时候会出现系统提示“内存不足”,这是由多方面原因造成的.本文具体分析下 ...

  4. linux中根目录下各个目录的作用

    /bin 二进制可执行命令.该目录下存放着普通用户的命令 /dev 系统的设备文件,即设备的驱动程序 /home 用户主目录的基点 /lost-found 这个目录平时是空的,当系统非正常关机而留下的 ...

  5. WP8.1学习系列(第十九章)——事件和路由事件概述

    我们将介绍在使用 C#.Visual Basic 或 Visual C++ 组件扩展 (C++/CX) 作为编程语言并使用 XAML 进行 UI 定义时,针对 Windows 运行时应用的事件的编程概 ...

  6. 精品绿色便携软件 & 录制操作工具

    https://www.vtaskstudio.com/index.php  录制宏工具 https://soft.anruan.com/29821/  TinyTask V1.5 电脑版 https ...

  7. Elasticsearch学习之深入聚合分析三---案例实战

    1. 统计指定品牌下每个颜色的销量 任何的聚合,都必须在搜索出来的结果数据中进行,搜索结果,就是聚合分析操作的scope GET /tvs/sales/_search { , "query& ...

  8. [原]Openstack之identity server(keystone)

    本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. 重新温习keystone的概念和理解 --------------------- ...

  9. centos 7安装jdk、tomcat

    jdk安装 创建上传目录: [root@ckl1 home]# pwd /home [root@ckl1 home]# mkdir upload 安装上传工具: yum install lrzsz 上 ...

  10. nginx expires配置

    配置expiresexpires起到控制页面缓存的作用,合理的配置expires可以减少很多服务器的请求要配置expires,可以在http段中或者server段中或者location段中加入   1 ...