display:table-cell在img标签上没有效果？

Question

做垂直居中，居中元素大小不固定，于是选择CSS table的方式来解决，HTML结构如下：

<div id="parent">
  <img src="pic64.png" class="box" />
  <span class="box">Many text here.</span>
</div>

样式：

#parent {
  height: 350px;
  width: 600px;
  background: yellow;
  display: table;
}
.box {
  display: table-cell;
  vertical-align: middle;
}

结果是图片并没有垂直居中的效果，需要在img外套一个div才能达到预期效果，可行的HTML结构：

<div id="parent">
  <div class="box">
    <img src="pic64.png"/>
  </div>
  <span class="box">Many text here.</span>
</div>

为什么要额外套一个div呢？

Answer 1

你没搞清楚dom节点的结构

你开始的例子里面把img和span同时加上box类，然后给box类加上display: table-cell，

这里的img元素实际上本身就是你的内容元素，而span是一个容器，它下面还有一个文档节点Many text here.

这个文档节点才是你的内容节点，table-cell在表格中也是一个容器元素，vtm将它的内容垂直对齐，你的img元素是个自闭合标签，它并没有内容，它自己就更不是它自己的内容了

之后套上个div就合乎情理了，在这里img元素实际上是和那个TextNodeMany text here.等价的。

说得比较绕不知道题主能不能明白？

Answer 2

因为你图片不包括在你的类box里面，所以display: table-cell对图片本身并不起作用

Answer 3

根据我的理解，vertical-align: middle;是只对inline元素起作用的，如果img本身被你变成table-cell就不是inline元素了，而当你设置在外层div上面时，内层的img实际上是通过继承vertical-align: middle;实现了居中，而非div的vertical-align: middle;导致img居中

---

又去查了下vertical-align: middle;在table-cell和inline元素中都有效，但是解释不一样……或者说基准线不一样，所以导致了你这样的结果

Answer 4

.box中没有图片