.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. codeforcess水题100道

    之所以在codeforces上找这100道水题的原因是为了巩固我对最近学的编程语言的掌握程度. 找的方式在codeforces上的PROBLEMSET中过的题最多的那些题里面出现的最前面的10个题型, ...

  2. 服务器搭建--Linux安装rabbitmq

    安装rabbitmq需要先安装erlang:安装erlang参考https://blog.csdn.net/ztx114/article/details/79912570 1.下载rabbitmq-s ...

  3. Windows 下 Tomcat 添加为系统服务

    标记一下,以便以后查看 setclasspath.bat 第一行插入 SET JAVA_HOME=C:\Program Files\Java\jre1.8.0_51 service.bat 第一行插入 ...

  4. windows下使用git管理代码,其中出现的问题的解决办法

    和朋友共同开发一个小项目,所以就涉及到了代码管理这块,刚开始想到的是使用svn,但是外网访问svn的时候需要使用花生壳来弄一个动态的域名,中间出了很多错误,感觉有点麻烦,所以就想到看看还有别的管理代码 ...

  5. 通俗大白话来理解TCP协议的三次握手和四次分手

    通俗理解: 但是为什么一定要进行三次握手来保证连接是双工的呢,一次不行么?两次不行么?我们举一个现实生活中两个人进行语言沟通的例子来模拟三次握手. 引用网上的一些通俗易懂的例子,虽然不太正确,后面会指 ...

  6. SSL是什么?如何使用?

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议.TLS与 ...

  7. Elasticsearch学习之多种查询方式

    1. query string search 搜索全部商品:GET /ecommerce/product/_search took:耗费了几毫秒 timed_out:是否超时,这里是没有 _shard ...

  8. 题目1091:棋盘游戏(DFS)

    题目链接:http://ac.jobdu.com/problem.php?pid=1091 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  9. intelj idea编译项目报错,Error:ajc: The method getDestHost() is undefined

    一.问题简述 这两天在idea中引入过aspectJ相关的东西,用到了aspectJ的编译器进行编译时织入. 结果今天在编译一个老项目时,(用到了lombok,lombok的idea插件会在javac ...

  10. CF 455A Boredom

    A. Boredom time limit per test 1 second memory limit per test 256 megabytes input standard input out ...