display:table-cell和 vertical-align

最新推荐文章于 2023-06-30 14:05:30 发布

代码敲着敲着就睡了

最新推荐文章于 2023-06-30 14:05:30 发布

阅读量521

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_49261425/article/details/118405238

版权

本文介绍了CSS中的display:table-cell属性，它使得元素表现得像表格单元格，支持IE8+及现代浏览器，但不兼容IE6/7。同时提醒要注意该属性与float和position: absolute等的冲突。vertical-align属性则用于行内元素和表格单元格元素的垂直对齐，但不适用于块级元素。示例中展示了如何用它来垂直对齐文本中的图片和表格单元内容。

摘要由CSDN通过智能技术生成

display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>）