display:table-cell属性简介

最新推荐文章于 2022-11-14 15:20:48 发布
最新推荐文章于 2022-11-14 15:20:48 发布
阅读量2.5k 收藏 5
点赞数 1
分类专栏： VUE 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49261425/article/details/112762507
版权

display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。

1. 不要与float：left; position:absolute; 一起使用
2. 可以实现大小不固定元素的垂直居中
3. margin设置无效，响应padding设置
4. 对高度和宽度高度敏感
5. 不要对display：table-cell使用百分比设置宽度和高度
6.高度设置百分比无效，只与内容的实际高度有关

代码敲着敲着就睡了
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
display:table-cell的应用
weixin_33929309的博客
08-26 789
一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用 我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以dis...
前端面试题-CSS让盒子居中的几种方式
aHaoyu的博客
10-26 2243
前端面试题-CSS让盒子居中的几种方式 第一种 最常用的盒子水平居中方式 <style> .box{ border: 1px red solid; width: 100px; height: 100px; margin: 0 auto; } </style> <body> <div class="box"></div> </body> 第二种 利用定位让盒子水
【前端】盒子水平垂直居中的六大妙招
big_asm的博客
05-21 1509
第一种方式 定位方法 使用定位实现，让子盒子相对于父盒子进行定位 父盒子设置相对定位，父盒子设置绝对定位 先把盒子挪到中间，然后向上向下移动自己的一半 缺点嘛就是必须知道盒子的宽高，才能计算移动的距离 <style> .aa{ width: 600px; height: 600px; position: relative; background-c.
display:table-cell布局
Aliguagua的博客
12-04 9546
display:table-cell布局display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，所以尽量避免同时使用。CSS display属性的表格布局相关属性的
display:table-cell
leadn的博客
11-25 532
display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。 设置了display：table-cell的元素： 对宽度高度敏感 对margin值无
关于CSS中的display:table-cell使用技巧的几种应用
01-19
一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了...
display:table-cell实现兼容性的两栏自适应布局实现代码
09-25
2. `.content` 类应用了`display: table-cell`，使得该元素在支持此属性的浏览器中表现为表格单元格。对于不支持的浏览器，使用`*display: inline-block`作为回退策略。这个类中的内容将占据其父元素（`.box`）的...
实现div垂直居中的display:table-cell方法示例介绍
12-13
ie7和ie6都不能识别 display: table-cell;（但是支持display: block等css1的属性！） ie8以及以后版本可以识别！ ie7和ie6能识别vertical-align:middle; 如果盒模型中间只有几段文字的话，设置line-height就可以...
display: table-cell知识点总结
song854601134的博客
01-02 2009
display: table-cell知识点总结 1. 匿名表格元素创建 CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。 也就是说如下代码： <div id="table-cell">content</div> #tab
display：table-cell
weixin_30295091的博客
12-25 143
一：什么是table-cell display:table-cell 就是标签属性以表格形式呈现，有点像td，IE8以上兼容 二：display:table-cell使用注意 1. float，position：absolute对其有一定的破坏性； 2. 宽度高度敏感 3. 对margin毫无反映，响应padding属性 4. 类容溢出会自动撑开父元素 三：display:...
table-cell布局
热门推荐
izwell的博客
09-04 3万+
display:table-cell属性简介 display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding...
display: table-cell属性
sinat_39303863的博客
03-29 266
display: table-cell属性 display: table-cell此属性使用可以实现单行或多行文本垂直居中的效果。表现类似td元素。 使用过程中注意如下： 1.不要与float:left；position:absolute；一起使用； 2.margin设置无效，响应padding设置； 单行或多行文字垂直居中： vertical-align:middle–使文字内容垂直居中 text-align: center–使文本居中对齐 border: 1px solid #5F9EA0—外框实线1
盒居中
大左的博客
04-20 349
盒居中这种需求在项目众是非常常见的，之前一直用的都是老方法三种定位，之后随着cs3的兴起display：flax是非常方便的一种方法也是用的最多的一种，特别是在移动应用开发的时候来实现，特别强大 之后有一段时间看CSDN的时候发现display：table-cell也特别实用但是不常见 我感觉还不错就记下了 下面我就整理一下盒居中的几种方法 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210406120019110.png?x-oss-pro...
总结盒子居中的常用方法
qq_44473483的博客
07-23 4505
让元素居中是每个前端都会经历的一个问题，而解决该问题的方法也各不相同，各有长短，今天总结下所知晓的方法，并分析利弊。 基础代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>订阅发布</title> <style> .bigBox { width: 500px; height: 500px; backg
【盒子居中常用的四种方法】
码农小黑的博客
07-29 5546
盒子居中的四种方法
前端技术中的几种居中方式
zhouwenying999的博客
11-14 7579
几种常用的前端水平、垂直居中方式
【前端】盒子水平垂直居中的五大方案
井察的博客
05-18 1371
第一种方式：定位的方式 让当前的盒子相对于其父级的容器来定位 首先要把父级元素的定位方式改为 relative 然后把当前盒子position设置为absolute，先把左上角固定在中间，然后向上和向下移动该盒子的一半 position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -50px; 方法的缺点：一定要知道当前盒子的宽和高，以此来计算调整位置后需要移动的距离 第二种方式：拉住他 **这种方式没什么好说的，
css - display:table-cell的使用
火星男孩的分享空间
02-08 1万+
参考： 布局神器(一)display:table-cell display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。 display: table与标签table的对比 示例： 参考：css文档：display css中display设置为table、table-row、table-cell后的作用及其注意点 &amp;amp;lt;!DOCTYPE htm...
display:table-cell;
最新发布
07-28
display:table-cell是CSS中的一个属性，它可以让标签元素以表格单元格的形式呈现，类似于td标签。\[3\]这个属性可以用来实现等高布局，特别适用于复杂的列表或者需要展示大量数据的情况。\[1\]使用display:table-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值