.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. Qt下libusb-win32的使用方法

    之前一直找不到适合WIN7下的Tiny6410的USB下载软件,正好这几天开始学习USB,所以打算自己写一个专门用于Tiny6410的WIN7下的USB下载软件. 发现了libusb这个库可以用作无驱 ...

  2. jQuery属性操作（一）

    下载了jQuery的UI组件,发现内容还挺多的,还是决定先把jQuery的源码看完一遍之后再涉足UI组件.考虑到队列和动画使用较少,特别是动画,基本开始使用css3完成.因此暂时略过,开始看jQuer ...

  3. smali-2.2.4.jar & baksmali-2.2.4.jar

    https://bitbucket.org/JesusFreke/smali/downloads/

  4. 阅读代码工具：Visual Studio Code

    打开一个文件夹,直接阅读,体验还不错 版本: 1.25.1提交: 1dfc5e557209371715f655691b1235b6b26a06be日期: 2018-07-11T15:43:11.471 ...

  5. nginx中实现把所有http的请求都重定向到https

    在网站启用https之后,我们可能会有一个需求,就是将所有的http的请求自动地重定向到https, 如果前端是使用的nginx来实现的https,我们可以这样配置nginx的301重定向: serv ...

  6. react+babel+webpack初试

    在上一篇,我们简单学习了webpack学习,现在这里我们简单学习一下react+babel+webpack,进行编译react语法jsx以及结合es6写法. 这里我就简单的直接上demo: packa ...

  7. 有哪些sql优化工具

    https://www.oschina.net/p/soar-xiaomi https://www.oschina.net/news/101034/xiaomi-opensource-soar SOA ...

  8. python实现简单购物车系统（练习）

    #!Anaconda/anaconda/python #coding: utf-8 #列表练习,实现简单购物车系统 product_lists = [('iphone',5000), ('comput ...

  9. 04 用户个人信息和二次开发django的文件存储系统

    用户的个人信息的前端页面如下: 业务逻辑分析 从上图中可以看出,需要后端传送的数据有,用户的名字和练习的地址,和最近的浏览记录. 用户的名字和联系的地址可以通过地址表(adress)中获得,地址表可以 ...

  10. C#控制台窗口居中显示(转)

    private struct RECT { public int left, top, right, bottom; } [DllImport("kernel32.dll", Se ...