display:table / display:table-cell 用法
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 用法的更多相关文章
- css中display设置为table、table-row、table-cell后的作用及其注意点
html: <div class="table"> <div class="row"> <div class="cell ...
- Display Tag Lib Table进行分页
Display Tag Lib是一个标签库,用来处理jsp网页上的Table,功能非常强,可以对的Table进行分页.数据导出.分组.对列排序等等,反正我在做项目时需要的功能它都给我提供了,而且使用起 ...
- 配合bootstrap实现的table 嵌套table
不要忘了引入bootstrap.css库 html部分 <div class="container"> <div class="row"> ...
- InnoDB INFORMATION_SCHEMA Temporary Table Info Table
InnoDB INFORMATION_SCHEMA Temporary Table Info Table INNODB_TEMP_TABLE_INFO提供有关InnoDB实例中当前活动的用户创建的In ...
- ArcGIS engine中Display类库——Display
转自原文 ArcGIS engine中Display类库——Display Display类库包括了用于显示GIS数据的对象.除了负责实际输出图像的主要显示对象(display object)外,这 ...
- Java&Selenium处理页面Table以及Table中随机位置的数据
一.摘要 前一段时间公司小伙伴刚刚接触自动化,遇到的一个问题,页面新创建的数据保存后,出现在table中的某个位置,并不一定是第一行还是第几行,这种情况下如何去操控它 本篇博文将介绍处理这个问题的一种 ...
- 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 ...
- ORA-01747: user.table.column, table.column 或列说明无效
Oracle.DataAccess.Client.OracleException ORA-01747: user.table.column, table.column 或列说明无效 原因1: 查了一下 ...
- SQLServer temporary table and table variable
Temporary tables are created in tempdb. The name "temporary" is slightly misleading, for ...
- Oracle10g 回收站及彻底删除table : drop table xx purge
drop后的表被放在回收站(user_recyclebin)里,而不是直接删除掉.这样,回收站里的表信息就可以被恢复,或彻底清除. 1.通过查询回收站user_recyclebin获取被删除的表信息, ...
随机推荐
- 杭电 2176 取(m堆)石子游戏（博弈）
取(m堆)石子游戏 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- nginx-伤心的事
今天测试接口,总是出问题,测试了两天,整个流程就卡在最后一步. 每次采用curl,request等请求访问我的服务器都会返回403状态码,网上找了很多资料 有权限的,有静态文件的,然而很多都没有什么卵 ...
- 下载Google官方/CM Android源码自己主动又一次開始的Shell脚本
国内因为某种原因,下载CM或Google官方的Android源码总easy中断.总看着机器.一中断就又一次运行repo sync还太麻烦,所以我特意编写了一段shell脚本(download.sh). ...
- Mysql中show processlist结果中的status状态总结
一 般情况下,DBA能从监控mysql的状态列表中查看出数据库的运行端倪,需要注意的是STATUS所表示的不同内容.且需要注意的是TIME字段表示的 意思.它表示的只是最后那个STAT状态持续的时间. ...
- VUE 之 路由 VueRouter
1.VueRouter的安装 1.1.https://unpkg.com/vue-router/dist/vue-router.js下载安装. 1.2.<script src="./s ...
- java随记2
1.Arrays java8里新添加了parallelSort等parallel开头的方法,表示利用cpu并行的能力 2.面向对象 如果继承树里的某个类要被初始化时,系统将会同时初始化该类的所有父类 ...
- 【bzoj4554】[Tjoi2016&Heoi2016]游戏
现在问题有硬石头和软石头的限制 所以要对地图进行预处理 分行做,把有#隔开的*(x)形成联通块的存储下来. 分列作,把有#隔开的*(x)形成联通块的存储下来. 求出所有的行联通个数和列联通个数 作为二 ...
- java上下文Context类
Context在Java中的出现是如此频繁,但其中文翻译"上下文"又是如此诡异拗口,因此导致很多人不是很了解Context的具体含义是指什么,所以很有必要来深究一下这词的含义. 先 ...
- HTML canvas
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- Deep Learning 36：python中的一些函数
1.map(function, sequence[, sequence, ...])函数:返回一个list作用:map的作用是以参数序列中的每一个元素调用function函数,返回包含每次functi ...