CSS display:table

概念

display:table可以在div等标签中实现表格的效果

display:table :相当于table标签
display:table-row :相当于tr标签
display:table-cell :相当于td标签

应用

1、利用display:tabledisplay:table-cell让块级子元素垂直居中

.box{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	display: table;
}
.box span{
	display: table-cell;
	vertical-align: middle; //垂直居中
	text-align: center; //水平居中
}
<div class="box">
	<span>我是大好人</span>
</div>

在这里插入图片描述
2、父级元素宽度固定,子元素平分宽度(优点不用给子元素设置%)

.box{
	width: 300px;
	height: 200px;
	border: 1px solid red;
	display: table;
}
.box div{
	display: table-cell;
}
<div class="box">
	<div style="background-color: pink">1</div>
	<div style="background-color: blue">2</div>
	<div style="background-color: red">3</div>
</div>

在这里插入图片描述

注意
  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSSdisplay属性可以用于控制元素的布局方式。其中,display:table可以将元素视为表格,而display:table-cell可以将元素视为表格单元格。 使用display:tabledisplay:table-cell可以实现一些布局效果,比如垂直居中和水平居中。例如,可以通过将父元素设置为display:table,子元素设置为display:table-cell,并配合vertical-align属性实现垂直居中效果。具体代码如下: ```css .box{ width: 200px; height: 200px; border: 1px solid red; display: table; } .box span{ display: table-cell; vertical-align: middle; /* 垂直居中 */ text-align: center; /* 水平居中 */ } ``` ```html <div class="box"> <span>我是大好人</span> </div> ``` 这样,子元素会在父元素内垂直居中,并且水平居中显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [基于CSS属性display:table的表格布局的使用](https://blog.csdn.net/weixin_30321449/article/details/99585932)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS display:table](https://blog.csdn.net/Bambi12/article/details/88734525)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值