display:table的几个用法
2024-08-28 09:55:33
DIV+CSS的布局已经让表格布局几乎很少用到,除非表格语义性很强的情况。
display:table解决了一部分需要使用表格特性但又不需要表格语义的情况,
尤其是DIV+CSS很不方便解决的问题,比如以下两种情况:
一、父元素宽度固定,想让若干个子元素平分宽度
通常的做法是手动设置子元素的宽度,如果设置百分数不一定能整除,设置具体的数值又限制了父元素的宽度固定,很烦。
可以使用display:table来解决:
.parent{display: table; width: 1000px;}
.son{display: table-cell;}
如此一来,就算是三个或者六个元素也可以很方便均分父元素的宽度了。
二、块级子元素垂直居中
想让一个div或p在父元素中垂直居中一直是很多人解决不了的问题(注意直接对块级元素使用vertical-align是不能解决这个问题的,vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐),同样可以使用display:table方便解决:
.parent {display: table;}
.son {display: table-cell; vertical-align: middle;}
将块级子元素的display设置为table-cell之后再使用vertical-align就可以了。
注意:虽然display:table解决了避免使用表格的问题,但有几个需要注意的:
(1)display: table时padding会失效
(2)display: table-row时margin、padding同时失效
(3)display: table-cell时margin会失效
最新文章
- 【WEB前端】CSS常用选择器
- struct socket 结构详解
- LINQ to Entities 查询语法
- parse,tryparse区别
- 使用docker-hub
- [Apache Maven Shade Plugin] [example] [001] 官方例子:includes-excludes
- How to fix “The program can’t start because MSVCR110.dll is missing from your computer.” error on Windows
- 兼容各浏览器中的PNG透明效果CSS定义
- HDU 4611Balls Rearrangement(思维)
- 记一次Linux下给硬盘分区格式化操作
- Linux内核调优参数说明
- 9.2、Libgdx的输入处理之鼠标、触摸和键盘
- 收藏pdf 链接
- 工控安全入门之Ethernet/IP
- Runstats,Reorgchk,Reorg,Rebind
- hibernate事务规范写法
- show master status, show slave status中的Executed_Gtid_Set
- fastq-to-fasta转换及fasta拆分、合并
- RaspberryPi.1.开机与远程桌面
- Samba共享及自动挂载测试