display:table  元素会作为块级表格来显示（类似table）；表格前后带有换行符；

display:table-cell 元素会作为表格单元格来显示（类似<td> 和 <th>）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap {

            display:table;

            width: 600px;

            height: 300px;

            background-color: pink;

            margin:300px auto;

        }

        .box {

            display:table-cell;

            /*height:300px;  这个可以没有*/

            text-align:center;

            vertical-align:middle;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="box">

            投资发展有限公司

        </div>

    </div>

</body>

</html>

display:table一般是使用在父元素上，display:table-cell 是使用在子元素上。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>demo</title>

        <style type="text/css">

            .box {

                width: 500px;

                height: 300px;

                border: 1px solid #FFF;

                background-color: #;

                display: table;

            }

            .wrap{

                display: table-cell;

                vertical-align: middle;     

            }          

        </style>

    </head>

    <body>    

        <div class="box">

            <div class="wrap">

                我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行固定宽度的文字自动换行并垂直剧中固定宽度的文字自动换行并垂直剧中

            </div>

        </div>

    </body>

</html>

display:table / display:table-cell 用法的更多相关文章

  1. css中display设置为table、table-row、table-cell后的作用及其注意点

    html: <div class="table"> <div class="row"> <div class="cell ...

  2. Display Tag Lib Table进行分页

    Display Tag Lib是一个标签库,用来处理jsp网页上的Table,功能非常强,可以对的Table进行分页.数据导出.分组.对列排序等等,反正我在做项目时需要的功能它都给我提供了,而且使用起 ...

  3. 配合bootstrap实现的table 嵌套table

    不要忘了引入bootstrap.css库 html部分 <div class="container"> <div class="row"> ...

  4. InnoDB INFORMATION_SCHEMA Temporary Table Info Table

    InnoDB INFORMATION_SCHEMA Temporary Table Info Table INNODB_TEMP_TABLE_INFO提供有关InnoDB实例中当前活动的用户创建的In ...

  5. ArcGIS engine中Display类库——Display

    转自原文  ArcGIS engine中Display类库——Display Display类库包括了用于显示GIS数据的对象.除了负责实际输出图像的主要显示对象(display object)外,这 ...

  6. Java&Selenium处理页面Table以及Table中随机位置的数据

    一.摘要 前一段时间公司小伙伴刚刚接触自动化,遇到的一个问题,页面新创建的数据保存后,出现在table中的某个位置,并不一定是第一行还是第几行,这种情况下如何去操控它 本篇博文将介绍处理这个问题的一种 ...

  7. mysqldump：Couldn't execute 'show create table `tablename`': Table tablename' doesn't exist (1146)

    遇到了一个错误mysqldump: Couldn't execute 'show create table `CONCURRENCY_ERRORS`': Table INVOICE_OLD.CONCU ...

  8. ORA-01747: user.table.column, table.column 或列说明无效

    Oracle.DataAccess.Client.OracleException ORA-01747: user.table.column, table.column 或列说明无效 原因1: 查了一下 ...

  9. SQLServer temporary table and table variable

    Temporary tables are created in tempdb.  The name "temporary" is slightly misleading, for ...

  10. Oracle10g 回收站及彻底删除table : drop table xx purge

    drop后的表被放在回收站(user_recyclebin)里,而不是直接删除掉.这样,回收站里的表信息就可以被恢复,或彻底清除. 1.通过查询回收站user_recyclebin获取被删除的表信息, ...

随机推荐

  1. 项目Beta冲刺（团队7/7）

    项目Beta冲刺(团队7/7) 团队名称: 云打印 作业要求: 项目Beta冲刺(团队) 作业目标: 完成项目Beta版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 陈宇 ...

  2. 使用双引擎，让kbmmw 的客户端访问更方便（既给浏览器做服务，也给桌面程序做服务）

    前面我们一直都讲了如何使用kbmmw smarthttpservice 给客户端提供REST  服务.主要都是返回给 浏览器访问的,如果我们使用delphi 开发桌面应用,如何使用这些服务呢?其实一切 ...

  3. POJ 1737 Connected Graph（高精度+DP递推）

    题面 \(solution:\) 首先做个推销:带负数的压位高精度(加减乘+读写) 然后:由 \(N\) 个节点组成的无向图的总数为: \(2^{N*(N-1)/2}\) (也就是说这个图总共有 \( ...

  4. .Net之路（十四）com组件、OLEDB导入EXCEL

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/chenfanglincfl/article/details/30546777 .NET com组件 ...

  5. js 时间戳精确值的问题

    最近做一个多图上传的功能,通过name + 时间戳命名,结果发现时间戳竟然一样,一直以为是代码逻辑的问题,结果出错在时间戳的获取上了. 关于时间戳的获取方式: 1.Date.parse() var d ...

  6. xunit输出output到控制台

    1.https://xunit.github.io/docs/capturing-output 里面似乎提到2个方法,第二个方法还需要在配置文件中添加appSetting 这里采用第一种方法, 1.添 ...

  7. Java数据库操作类演示

    只在mysql上测试过,不知道算不算好使​1. [代码][Java]代码     package org.load.demo; import java.io.IOException;import ja ...

  8. 第三届蓝桥杯C++B组省赛

    1.微生物增值 2.古堡算式 3.海盗比酒量 4.奇怪的比赛 5.方阵旋转 6.大数乘法 7.放棋子 8.密码发生器 9.夺冠概率 10.取球博弈

  9. limit的用法

    limit子句可以用于强制select语句返回指定的记录数.limit接受一个或两个数字参数,参数必须是整数常量.如果给定两个参数,第一个参数指定第一个返回记录行的偏移量,第二个参数指定返回记录行的最 ...

  10. [yii]Fetch data from database and create listbox in yii

    <?php $records = User::model()->findAll(); $list = CHtml::listData($records, 'id', 'username') ...