table-cell height，img display：block

Question

我对table-cell的理解是每个table-cell的高度将扩展到与最高table-cell相同的高度;但是，在此示例中，当.col2中的.col1设置为img且.col1内的文字display: block时，.col2的高度会延伸到display: block以下{1}}被一直推到底部。如果img已从.col1，.col2和display: block排除，则文字与中间对齐。我的问题是为什么img上的display: block会改变表格单元格的呈现方式以及文本的对齐方式。在img上切换<div class="row1"> <div class="col1"> <img src="http://lorempixel.com/1000/800/" alt=""> </div> <div class="col2"> <p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet mollitia est maiores temporibus ea, sint ex repellat ipsa eveniet nesciunt. </div></p> </div> </div> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab veniam praesentium delectus aliquid ea nisi porro eius rem debitis architecto quas, hic placeat ratione possimus voluptates perferendis at voluptatibus tenetur! </div></p> 以查看差异。

https://codepen.io/norkuy/pen/EvQQrE

HTML

.col1, .col2 {
  width: 50%;
  display: table-cell;
}

.col2 {
  background: black;
  color: white;
}

.row1 {
  display: table;
  img {
    display: block;
  }
}

img {
  max-width: 100%;
  width: 100%;
}

CSS

foreach

Answer 1

如果您希望table-cell元素正常工作，则您的单元格容器必须显示table-row

.table {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}

.cell {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
  border-bottom: 1px solid #000;
}

<div class="table">
  <div class="row">
    <div class="cell">
    <br/><br/>fdfsf
    </div>
    <div class="cell">
    dffdsf
    </div>
  </div>
</div>