html - css 内联块与表格单元

Question

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

我发现这两种风格是一样的。无论你喜欢什么风格，例如。text-align: center; vertical-align: middle;等通过识别display: inline-block;或display: table-cell;将工作相同。

请告知主要差异。

Answer 1

display: table-cell并且display: inline-block;混淆相同，但它们之间存在巨大差异。当您的浏览器将被重新调整大小或您的内容超过其宽度时，将不会display: inline-block;像ie inline-block 那样表现为块级别，而不会。 display: table-cell;display: table-cell;

你可以在这里看到它们之间的区别

当您应用display: inline-block;Re-size your window by press Ctrl 键并使用鼠标滚动按钮滚动以查看差异时，您还会发现块之间的间隙。

请注意不像在 中vertical-align: middle;那样工作。如果您有工作演示，请分享一个。display: table-cell;display: inline-block;

Answer 2

display:table-cell用于在 a 内部使用display:table-row，本身在 a 内部使用display:table。使用不当将导致创建匿名元素，这可能会对布局的其他方面产生负面影响。

话虽如此，vertical-align两者的含义却截然不同。在display:inline-block中，它指的是元素本身如何与周围元素对齐。另一方面，使用display:table-cell, 会影响其中元素的垂直对齐方式。