.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. codeforces水题100道 第十题 Codeforces Round #277 (Div. 2) A. Calculating Function (math)

    题目链接:www.codeforces.com/problemset/problem/486/A题意:求表达式f(n)的值.(f(n)的表述见题目)C++代码: #include <iostre ...

  2. 转:ANDROID音频系统散记之四:4.0音频系统HAL初探

    昨天(2011-11-15)发布了Android4.0的源码,今天download下来,开始挺进4.0时代.简单看了一下,发现音频系统方面与2.3的有较多地方不同,下面逐一描述. 一.代码模块位置 1 ...

  3. it 删除远程分支

      一不小心把本地的临时分支push到server上去了,想要删除.一开始用git branch -r -d origin/branch-name不成功,发现只是删除的本地对该远程分支的track,正 ...

  4. Clock skewdetected. Your build may be incomplete.

    解决方法: find . -type f | xargs -n touch make clean make

  5. tp3.2分页功能

    后台 1.利用Page类和limit方法分页 $User = M('User'); // 实例化User对象 $count = $User->where('status=1')->coun ...

  6. git 命令自动补全

    下载 Git 的源代码 使用如下命令即可下载: git clone https://github.com/git/git 复制 git-completion.bash 源代码下有个 contrib/c ...

  7. 使用 mysql workbench 建议

    在日常使用mysql workbench时,未免操作失误,不建议启用远程管理.

  8. Sencha Touch 实战开发培训 视频教程 第二期 第六节

    2014.4.18 晚上8:20左右开课. 本节课耗时没有超出一个小时. 本期培训一共八节,前两节免费,后面的课程需要付费才可以观看. 本节内容: 图片展示 利用list展示图片: 扩展Carouse ...

  9. Sencha Touch 实战开发培训 视频教程 第二期 第五节

    2014.4.16 晚上8:20分开课. 本节课耗时没有超出一个小时,主要讲解了Sencha Touch 结合百度地图的用法. 本期培训一共八节,前两节免费,后面的课程需要付费才可以观看. 本节内容: ...

  10. SecureCRT无法使用root账户远程连接ubuntu

    ========1.问题============ SecureCRT无法使用root账户远程连接ubuntu 用其他账户连接,正常 用root账户连接,不能连接 =========2.原因====== ...