.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. Jdk1.8在CentOS7中的安装与配置

    自从2014年3月19日甲骨文公司发布Java 8.0的正式版以来,面向对象的Java语言不仅朝着一个更好的方向发展,而且吸取了当前比较流行的函数式编程的特性——Java 8.0加入了函数式编程的特点 ...

  2. Qt编写气体安全管理系统(界面超漂亮)

    自从把Qt样式表葵花宝典这个pdf文件看完以后,将所有的qss内容都轮了一遍,还写了个皮肤生成器工具,https://blog.csdn.net/feiyangqingyun/article/deta ...

  3. 【WEB前端系列之CSS】CSS3动画之Animation

    前言 动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading 学习CSS3中Animation之前先来看一个动画特 ...

  4. Post Office Protocol --- pop协议

    https://en.wikipedia.org/wiki/Simple_Mail_Transfer_Protocol

  5. mysql optimize整理表碎片

    当您的库中删除了大量的数据后,您可能会发现数据文件尺寸并没有减小.这是因为删 除操作后在数据文件中留下碎片所致.optimize table 可以去除删除操作后留下的数据文件碎片,减小文件尺寸,加快未 ...

  6. Nhibernate学习

    Contains 缓存中是否存在SessionFactoryBizCom.GetInstance().GetCurrentSession().Contains(t1) Evict 临时状态(Trans ...

  7. [移动] Xamarin install

    It was not possible to complete an automatic installation. This might be due to a problem with your ...

  8. MatLab Swap Rows or Cols 交换行或列

    Matlab是矩阵运算的神器,所以可以很轻易的交换任意行或列,而且写法非常简洁,如下所示: a = [ ; ; ]; b = a; b(:,[;]) = b(:,[;]); % Swap col an ...

  9. react封装组织架构递归树

    想用react实现一个递归树,但一些框架里面的有些不符合需求,于是自己写了个,功能比较简单,欢迎批评指正.. react实现这样一个组织架构递归树,下级部门的收起和展开,点击部门名称时请求接口获取下级 ...

  10. SPOJ Distinct Substrings【后缀数组】

    Given a string, we need to find the total number of its distinct substrings. Input T- number of test ...