.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. IDA + VMware 调试win7 x64

    IDA+gdb配合VMware调试windows已经不是什么新鲜事了,但是之所以要发这篇帖子是因为我按照之前的帖子还有网上其他的教程设置调试环境,结果遇到了各种问题,所以仅仅是更新一下,各位轻拍. 环 ...

  2. Android英文文档翻译系列(6)——LocalBroadcastManager

    public class LocalBroadcastManager extends Object java.lang.Object    ↳ android.support.v4.content.L ...

  3. JS案例 - 基于vue的移动端长按手势

    ================================惯例碎碎念前言================================ 当时首先想到要做长按事件的时候,我想到的是vue内部的自 ...

  4. DOS 如何取当前时间做为文件名?

    如果要取得以日期为文件名的文件,假设在命令行下键入date返回形式为:当前日期: 2005-06-02 星期四echo > %date:~0,4%%date:~5,2%%date:~8,2%~表 ...

  5. aws.s3的 upload 和putObject有什么区别

    相同点:上传或新增一个object : <template> <div class="page"> <!-- 参考:https://blog.csdn ...

  6. [原]openstack-kilo--issue(四) WARNING: nova has no endpoint in ! Available endpoints for this service:

    本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. 在安装kilo的时候出现了一个报错 nova endpoints WARNING ...

  7. 部署OpenStack问题汇总(三)--Failed to add image

    使用glance add 上传完img文件的时候出现了下面的错误 ------------------------------------------------------------------- ...

  8. jmeter函数助手之time函数实操

    在一个接口测试中,需要提交的请求中要带时间,在看完jmeter帮忙文档,正好总结一下 1.需求 在一个XML请求中请求数据要带有时间,如下 "><ID>/lte/pdeta ...

  9. Log4net配置之Winform项目

    具体方法如下: 一.App.config配置 <?xml version="1.0" encoding="utf-8" ?> <configu ...

  10. Linux--抓取Appium网站命令

    # 获取各命令url地址 curl http://appium.io/docs/en/commands/device/app/is-app-installed/ 2>/dev/null | gr ...