display:table / display:table-cell 用法
2024-08-25 22:03:08
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>
最新文章
- web api接口同步和异步的问题
- HP ALM 使用经验
- RegExp 对象 (JavaScript)
- C#操作Mongodb的心得
- C#并行编程-Task
- 一次Promise 实践:异步任务的分组调度
- 遍历List中的object对象
- 多台web如何共享session进行存储(转载)
- ios 用户相册
- [转载] Redis
- USB Packet Types
- cdoj 1342 郭大侠与甲铁城 树状数组+离线
- iOS开发——数据持久化&;使用NSUserDefaults来进行本地数据存储
- EJB (not bound)
- window权限 及c++实现 【网摘】(转)
- DataBase MongoDB高级知识-易扩展
- df、du命令
- 20175204 张湲祯 2018-2019-2《Java程序设计》 第一周学习总结
- 关于JavaScript的操作
- ubuntu系统下Python虚拟环境的安装和使用