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. Qt浅谈之二十一log调试日志

    一.简单介绍 近期因调试code时,想了解程序的流程,但苦于没有一个简易的日志记录,不停使用qDebug打印输出,而终于提交代码时得去多次删除信息打印,有时还会出现新改动的代码分不清是哪些部分.而使用 ...

  2. Tomcat安全配置规范

    第1章 账号管理.认证授权 1.1 账号 1.1.1 共享帐号管理 安全基线项目名称 Tomcat共享帐号管理安全基线要求项 安全基线编号 SBL-Tomcat-01-01-01 安全基线项说明   ...

  3. 两个月刷完Leetcode前400题经验总结

    更新:气死了,挂个傻逼: 每次做个分享.组织个活动,就会有一些傻逼冒泡生怕别人不知道他是傻逼,气死我了!自己好好看看非法集资的概念,我办这个活动,一分钱都没收,入群99元是督促大家完成刷题任务,最后完 ...

  4. 关于yum的一些基本的东西

    1 sqlite数据库的使用 第一,某个centos版本的包相关的信息都放在一个服务器端的sqlite数据库文件中,yum会下载到本地,进行包安装的时候用. 第二,安装的历史记录放在sqlite数据库 ...

  5. Flume-ng-sdk源码分析

    Flume 实战(2)--Flume-ng-sdk源码分析 - mumuxinfei - 博客园 http://www.cnblogs.com/mumuxinfei/p/3823266.html

  6. Client should know only resource URIs and that’s all.

    REST Principles and Architectural Constraints – REST API Tutorial https://restfulapi.net/rest-archit ...

  7. 【酷Q&C++】如何利用酷Q制作一个机器人?

    ——酷Q Air教程 要想阅读本篇教程,读者需要基本的C++知识以及Visual Studio 2010/2015/2017 首先,需要从官方网站下载软件 https://cqp.cc/t/23253 ...

  8. 如何在 Ubuntu 云服务器上部署自己的 Rails 应用

    安装步骤  参考:https://ruby-china.org/topics/32851 在云服务器上安装Ruby|Rails : http://www.cnblogs.com/znsongshu/p ...

  9. ubuntu16.04和服务器 caffe 安装

    在centos6.X上安装caffe 0.编译安装gcc4.8.5 由于centos6.x中的gcc版本老旧,不支持c++11所以要安装gcc4.8.5,以下是安装教程.参考CentOS 6.4 编译 ...

  10. (linux)mmccard驱动的读写过程解析

      mmc io的读写从mmc_queue_thread()的获取queue里面的request开始. 先列出调用栈,看下大概的调用顺序, 下面的内容主要阐述这些函数如何工作. host->op ...