display:table和display:table-cell的妙用

　　display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！

这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居中的。虽然感觉用的不多，但是在某些时候还是挺管用的，如下

直接上代码：

html:

    <div class="parent"><p class="son">会议认为，党的十八大以来，我国经济发展取得历史性成就、发生历史性变革，为其他领域改革发展提供了重要物质条件。经济实力再上新台阶，经济年均增长7.1%，成为世界经济增长的主要动力源和稳定器。</p></div>

css:

       .parent {display: table;width: 300px;height: 300px;text-align: center;}.son  {display: table-cell;height: 200px;background-color: yellow;vertical-align: middle;}

看完代码是不是瞬间明白了，这里我们只需要将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中啦。是不是很直接很简洁~

转载于:https://www.cnblogs.com/chen-cong/p/8076442.html

display:table和display:table-cell的妙用相关推荐

table row设置cell的html,display:table、display:table-row和display:table-cell的用法_html/css_WEB-ITnose...
. 从以上属性值的基本概念定义可以看出,它们可以打造一个非table相关标签建立的表格效果,代码实例如下: 蚂蚁部落从以上代码的表现来看,为div添加了相关属性值之后,差不多完全具有了表格的相关特性 ...
php display block,CSS display (block inline none )常见属性和用法教程
display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...
CSS属性display的用法 display=
display是设置元素的浮动特征,要区别visibility属性(visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏))是 ...
HTML中在table的td属性中嵌套table，为什么table居中？
我在表格table的td中又嵌套了一个table,但是table中的东西会呈现垂直居中的状态,那么问题是什么,是其table继承了vertical-align: inherit属性 vertical- ...
html display 显示,CSS display显示
显示或隐藏我们可以通过使用visibility属性或display属性来显示或隐藏元素. 要隐藏元素,请将display属性设置为"none"或将visibility属性设置为& ...
mysql create table()_MySQL Create Table创建表
表的创建命令需要: 表的名称字段名称定义每个字段(类型.长度等) 语法下面是通用的SQL语法用来创建MySQL表: CREATE TABLE table_name (column_name co ...
R语言使用table函数计算单分类变量的频率表（frequency table）、使用prop.table函数将table函数计算获得的频率表转化为比率表、返回单分类变量每一个类别的比率、或者百分比
R语言使用table函数计算单分类变量的频率表(frequency table).使用prop.table函数将table函数计算获得的频率表转化为比率表.返回单分类变量每一个类别的比率.或者百分比. ...
matlab如何创建table,table,matlab,中table数据类型,创建,调用,访问
MATLAB table数据结构目录: ?关于作者 ?table简介 o为什么需要table数据结构 o通过导入数据构造table对象 o调用table构造函数来构造table对象 o通过转换函数构 ...
mysql create很多table,SQL CREATE TABLE 语句
原标题:SQL CREATE TABLE 语句 SQL CREATE TABLE 语句 CREATE TABLE 语句用于创建数据库中的表. 表由行和列组成,每个表都必须有个表名. SQL CREAT ...
antd 下拉框怎么联动_Antd的Table组件嵌套Table以及选择框联动操作
一.需求在使用Table组件嵌套Table时,父子Table的选择框需要联动,即父Table选中,该行下的子Table需要全选中,某一个子Table全部选中,则该子Table所在的父Table那一行 ...

display:table和display:table-cell的妙用

display:table和display:table-cell的妙用相关推荐

最新文章

热门文章