display:table-cell的作用是啥？

最新推荐文章于 2025-02-07 18:01:02 发布
最新推荐文章于 2025-02-07 18:01:02 发布
阅读量576 收藏
点赞数
分类专栏： 笔记 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41083105/article/details/115234989
版权
该博客介绍了如何利用CSS的text-align和vertical-align属性将元素在页面中居中显示，详细解释了这两个属性的工作原理及它们在实现居中布局时的相互配合。内容包括text-align:center和vertical-align:middle的使用方法，以及它们在不同场景下的应用实例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这个属性让元素变成表格单元，可用于实现居中效果，text-align:center以及vertical-align:middle对其有效。

布局神器display:table-cell
黄沙百战穿金甲，不破楼兰终不还。
09-09 1369
元素两端对齐     第一个案例是让两个元素分别向左和向右对齐，如果是过去，我一定会用float来实现，但其实用table可以这么做：      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
display:table-cell的应用
weixin_33929309的博客
08-26 880
一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用 我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以dis...
display:table-cell
weixin_33698823的博客
04-06 268
我所知道的几种display:table-cell的应用 by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=1187 一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签...
css display: table-cell； 让行内元素溢出隐藏为省略号
最新发布
sandwich_99的博客
02-07 249
在前端开发里，文本溢出隐藏显示省略号是常见需求。若在组件行内元素中修改或添加文本实现该效果，过程往往比较繁琐。通常将行内元素转为行内块元素来设定宽度，但会出现行内元素容器溢出问题，导致布局错乱。。
display:table-cell的作用列举
AliceWu的博客
08-01 540
.parents{display:table} .son{display:table-cell;vertical-align: middle;}
关于CSS中的display:table-cell使用技巧的几种应用
01-19
一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了...
display:table-cell实现兼容性的两栏自适应布局实现代码
09-25
`display: table-cell` 是一个在 CSS 中实现此类布局的有效方法，它利用了表格单元格（table-cell）的特性来实现列的自适应。这种方法在处理不同屏幕尺寸和设备时能够保持内容的对齐和比例。 在标题和描述中提到的...
实现div垂直居中的display:table-cell方法示例介绍
12-13
ie7和ie6都不能识别 display: table-cell;（但是支持display: block等css1的属性！） ie8以及以后版本可以识别！ ie7和ie6能识别vertical-align:middle; 如果盒模型中间只有几段文字的话，设置line-height就可以...
table-cell作用
magicfly9527的专栏
02-08 1539
display:table-cell自适应布局下连续单词字符换行 by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=2161 一、过年回家，快刀乱麻，直入主题 之前有几次提到了使用display:table-cell实现强大的任意尺寸元素的自适应布局（都藏在长
display:table-cell布局
Aliguagua的博客
12-04 9915
display:table-cell布局display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，所以尽量避免同时使用。CSS display属性的表格布局相关属性的
display：table-cell
weixin_30295091的博客
12-25 225
一：什么是table-cell display:table-cell 就是标签属性以表格形式呈现，有点像td，IE8以上兼容 二：display:table-cell使用注意 1. float，position：absolute对其有一定的破坏性； 2. 宽度高度敏感 3. 对margin毫无反映，响应padding属性 4. 类容溢出会自动撑开父元素 三：display:...
display:table-cell属性
夏天的博客
10-22 427
display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。 IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。 如何垂直居中一个标签，也可以用到该属性 ...
display:table-cell几种应用
weixin_34268843的博客
06-21 126
http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/
display:table和display:table-cell的妙用
暖心少年
05-24 5078
display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居中的。虽...
css display table-cell
常思考->有目标->重实践->善反思
05-22 1899
display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。 下面是所有值的用法描述。display本身意思是“显示、阵列”的意思值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-b
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后的作用及其注意点 <!DOCTYPE htm...
display:table-cell;
07-28
display:table-cell是CSS中的一个属性，它可以让标签元素以表格单元格的形式呈现，类似于td标签。\[3\]这个属性可以用来实现等高布局，特别适用于复杂的列表或者需要展示大量数据的情况。\[1\]使用display:table-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值