.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. 《Lua程序设计》第7章 迭代器与泛型for 学习笔记

    本章将介绍如何编写适用于泛型for的迭代其(Iterator).7.1 迭代器与closurehttp://www.cnblogs.com/moonlightpoet/p/5685275.html 7 ...

  2. Python正则表达式 学习笔记

    python第一个正则表达式 1. import re : python正则表达式模块 2. 第一个正则表达式 re.compile(r'imooc') pattern.match('imooc py ...

  3. cp自动创建层级结构的例子

    一个拷贝命令的技巧,不仅拷贝文件,而且拷贝目录结构.记录下来. *拷贝的时候,自动创建参数中源文件的路径:#cp --parents parentdir1/parentdir2/sourcefile ...

  4. Win8应用开发 入门篇（三） UX交互导航模式

    导航模式(Windows 应用商店应用)   在本文中 分层模式 画布上导航 顶部应用栏 语义式缩放 相关主题 组织 Windows 应用商店应用中的内容,以便用户可以轻松而直观地进行导航.使用正确的 ...

  5. mint下截图工具shutter的安装和使用设置

    [原创作品,技术交流.允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息.如有错误,请指正] /** author: lihaibo date: 1/25/2016 */ 今天安装了双系统 ...

  6. ZOJ 3435 Ideal Puzzle Bobble

    ZOJ Problem Set - 3435 Ideal Puzzle Bobble Time Limit: 2 Seconds      Memory Limit: 65536 KB Have yo ...

  7. 教你如何将word中的表格完美粘贴到ppt中

    经常操作办公软件的人一定有一个困惑,ppt本身表格编辑能力似乎很弱,如果从word里直接将一个编辑好的表格复制粘贴到ppt中,整个表格一定会发生让你没有预料的变化,还得重新花老大的劲去重新编辑,有人屛 ...

  8. Nexus网页直接上传jar包

    登陆已经安装好的nexus私有仓库,如图:   点击左边菜单“Repositories”,选择右边列表“3rd party“   点击“3rd party”,选择artifact Upload,如下图 ...

  9. 常用AT指令集 (转)

    常 用 AT 命 令 手 册 .常用操作 1.1 AT 命令解释:检测 Module 与串口是否连通,能否接收 AT 命令: 命令格式:AT<CR> 命令返回:OK (与串口通信正常) ( ...

  10. Memcached下载安装、NET对Memcached进行CRUD操作（2）

    Memcached概念.作用.运行原理.特性.不足简单梳理(1) Memcached下载安装.NET对Memcached进行CRUD操作(2) Memcached存Session数据.访问安全性.使用 ...