display:table-cell在img标签上没有效果?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

做垂直居中,居中元素大小不固定,于是选择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呢?

展开
收起
杨冬芳 2016-06-02 10:52:16 1947 0
1 条回答
写回答
取消 提交回答
  • 杨冬芳
    IT从业

    你没搞清楚dom节点的结构

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

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

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

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

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

    2019-07-17 19:24:16
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
Transforming the data center
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载