Html css inline-block vs table-cell
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15939896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css inline-block vs table-cell
提问by
What are the differences between inline-block and table-cell?
inline-block 和 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.
我发现这两种风格是一样的。无论你喜欢什么风格，例如。text-align: center; vertical-align: middle;等通过识别display: inline-block;或display: table-cell;将工作相同。
Please notify the key differences.
请告知主要差异。
回答by Bhojendra Rauniyar
display: table-celland display: inline-block;are confusing the same but it has huge difference between them. display: inline-block;will not behave as the display: table-cell;i.e. inline-block will behave as the block level when your browser will be re-sized larger or if your contents exceeds than its width while display: table-cell;won't.
display: table-cell并且display: inline-block;令人困惑，但它们之间存在巨大差异。display: inline-block;不会像display: table-cell;ie inline-block 那样，当您的浏览器将重新调整大小或如果您的内容超过其宽度而display: table-cell;不会时，它将表现为块级别。
You can see the differences between them here
您可以在此处查看它们之间的差异
You'll also find the gap between block when you apply display: inline-block;Re-size your window by pressing Ctrl key and scrolling with mouse scroll button to see differences.
当您display: inline-block;通过按 Ctrl 键并使用鼠标滚动按钮滚动以查看差异来重新调整窗口大小时，您还会发现块之间的间隙。
Notice the vertical-align: middle;is not working as display: table-cell;in display: inline-block;. If you have working demo please share one.
注意vertical-align: middle;不工作为display: table-cell;在display: inline-block;。如果您有工作演示，请分享一个。
回答by Niet the Dark Absol
display:table-cellis 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.
display:table-cell旨在在 a 内部使用display:table-row，本身在 a 内部display:table。使用不当将导致创建匿名元素，这可能会对布局的其他方面产生负面影响。
That being said, vertical-alignhas 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.
话虽如此，vertical-align两者的含义却截然不同。在 中display:inline-block，它指的是元素本身如何与周围元素对齐。另一方面，使用display:table-cell，它将影响其内部元素的垂直对齐方式。
