table-cell设置宽高、居中
- table-cell默认宽高由内容决定
<style type="text/css" rel="stylesheet">
.content {
color: white;
}
.cell {
background-color: blue;
display: table-cell;
}
</style>
<div class="content">
<div class="cell">
test
</div>
</div>
- 可以设置固定宽高：
.cell {
background-color: blue;
display: table-cell;
width: 100px;
height: 100px;
}
- 直接设置宽高百分比是无效的，因为table没有显式声明，默认加的table宽高也是由内容决定，所有要使用百分比，必须显式声明table并定义宽高（row默认充满table）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>cell</title>
</head>
<body>
<style type="text/css" rel="stylesheet">
.content {
color: white;
}
.table {
display: table;
width: 100%;
height: 200px;
}
.cell {
background-color: blue;
display: table-cell;
width: 100%;
height: 100%;
}
</style>
<div class="content">
<div class="table">
<div class="cell">
test
</div>
</div>
</div>
</body>
</html>
- cell里的内容水平居中
.cell {
background-color: blue;
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
}
- cell里的内容垂直居中：
.cell {
background-color: blue;
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
注意：设置 line-height: 100%;无效，无法让文字垂直居中,设置 line-height: 200px;也可以垂直居中
table-cell设置宽高、居中的更多相关文章
- <canvas>设置宽高遇到的问题
在使用<canvas>元素时必须设置宽度和高度,指定可以绘画的区域大小.但是这里设置宽度和高度的时候有一个小问题. 样例代码: <!DOCTYPE html> <html ...
- 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考
起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...
- 第4天：JS入门-给div设置宽高背景色
今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...
- 在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?
此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...
- a标签什么时候可以设置宽高
行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高:而当设置了绝对定位或者浮动,会生成块框(即变成块元素),所以就可以设置宽高了
- frame方式布局一段文子，设置宽高
计算一段文字的宽高 /** * 计算一段文字的宽高 * * @param size 这段文字的最大宽高 * @param options NSStringDrawingUsesLineFragment ...
- android下载网络图片，设置宽高，等比缩放
使用Picasso组件去下载图片会发现图片宽高会变形不受等比缩放控制,即使设置了图片的 scaleType,可能是对Picasso的api没有用对, Picasso.with(this.activit ...
- java压缩图片设置宽高
package html2pdf_2; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; ...
- 安卓模拟器"bluestacks"在电脑上的设置.(宽,高)
可以在手机上找到大量英语学习APP. 习惯使用电脑的朋友,可以安装模拟器来使用这些APP. bluestacks 是一款比较好的模拟器. 但其默认的宽,高,却无法在软件中修改. 找到一个比较好的教程来 ...
随机推荐
- 在 ASP.NET Core 程序启动前运行你的代码
一.前言 在进行 Web 项目开发的过程中,可能会存在一些需要经常访问的静态数据,针对这种在程序运行过程中可能几乎不会发生变化的数据,我们可以尝试在程序运行前写入到缓存中,这样在系统后续使用时就可以直 ...
- 安装lxml
1.安装wheel pip3 install -i https://pypi.douban.com/simple wheel 2.下载lxml库的whl文件 下载地址:https://www.lfd. ...
- 异数OS TCP协议栈测试（一）--数据传输篇
异数OS TCP协议栈测试(一)--数据传输篇 本文来自异数OS社区 github: 异数OS-织梦师(消息中间件)群: 476260389 测试目标 数据传输IO性能测试,主要是建立连接后测试收 ...
- 如何在GitHub上大显身手？
推荐一篇良许大佬的文章,如何在github上大显身手.拥有自己的github,且有所贡献,这是一件很有意义的的事情,在面试上也是加分项哦,赶紧搞起来. 转载至http://uee.me/aHAfN 这 ...
- CSS动效集锦，视觉魔法的碰撞与融合（三）
本文讲述的原理和相关demo 扇形DIV的使用——实现雷达扫描图 DIV环形布局—实现loading圈 动画的向量合成—实现抛物线动画 无限滚动动画—实现跑马灯效果 perspective和trans ...
- 《Sequence Models》课堂笔记
Lesson 5 Sequence Models 这篇文章其实是 Coursera 上吴恩达老师的深度学习专业课程的第五门课程的课程笔记. 参考了其他人的笔记继续归纳的. 符号定义 假如我们想要建立一 ...
- 啥叫ORM
名字: object / relation map 对象关系映射 定义: 通过(描述对象和数据库之间映射的)元数据把对象自动转为关系数据 一般都是作为中间件 优缺: 优点是自动化,屏蔽了SQL语句,而 ...
- Python3 正则表达式 re 模块的使用 - 学习笔记
re 模块的引入 re 模块的使用 re.compile() re.match()与re.search() re.match re.search() 区别 re.findall()与re.findit ...
- Day4-Python3基础-装饰器、迭代器
今日内容: 1.高阶函数 2.嵌套函数 3.装饰器 4.生成器 5.迭代器 1.高阶函数 定义: a:把一个函数名当作实参传给函数 a:返回值包含函数名(不修改函数的调用方式) import time ...
- ios--->上下拉刷新控件MJRefresh
上下拉刷新控件MJRefresh 一.类结构 MJRefreshComponent.h MJRefreshHeader.h MJRefreshFooter.h MJRefreshAutoFooter. ...