css inline-block vs table-cell [英] css inline-block vs table-cell

问题描述

inline-block和table-cell有什么区别？

What are the differences between inline-block and table-cell?

我发现这两种风格都是一样的。无论你的风格为eg。 text-align：center;通过标识 display：inline-block; 或 display：table-cell; 会工作相同。

I have found these two styles are the same. Whatever you style for eg. text-align: center; vertical-align: middle; etc. by identifying display: inline-block; or display: table-cell; would work the same.

请通知关键差异。

推荐答案

display：table-cell 旨在用于 display：table-row 本身在 display：table 内。不当使用将导致匿名元素被创建，这可能与您的布局的其他方面负面影响。

display:table-cell is intended for use inside a display:table-row, itself inside a display:table. Improper use will result in anonymous elements being created, which may interefere negatively with other aspects of your layout.

话虽如此， vertical-align 在两者中有非常不同的含义。在 display：inline-block 中，它指的是元素本身如何与周围的元素对齐。另一方面，使用 display：table-cell ，它将影响其内部元素的垂直对齐。

That being said, vertical-align has very different meanings in both. In display:inline-block, it refers to how the element itself aligns with the surrounding elements. On the other hand, with display:table-cell, it will affect the vertical alignment of elements inside it.

这篇关于css inline-block vs table-cell的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！