为什么旋转后的图像在css表格中会有不同的显示？

Question

我正在尝试使用css创建一个表。下面的代码比较了两个表，一个使用传统的html表标记创建，另一个使用css创建。每个表格显示两个图像，一个是旋转的，另一个不是。在html表中，旋转的图像与非旋转的图像对齐。但是，在css表中不会发生这种情况。我不知道为何会这样。

​

  .rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  DIV.table {
    display: table;
  }
  DIV.tr {
    display: table-row;
  }
  SPAN.td {
    display: table-cell;
  }

<div class="table">
  <div class="tr">
    <span class="td"><img src="https://placehold.it/400x200&text=one" class="rotate90" alt="Image" border=3 height=200 width=400></img></span>
    <span class="td"><img src="https://placehold.it/200x400&text=two" alt="Image" border=3 height=400 width=200></img></span>
  </div>
</div>

<table>
  <tr>
    <td><img src="https://placehold.it/400x200&text=one" class="rotate90" alt="Image" border=3 height=200 width=400></img>
    </td>
    <td><img src="https://placehold.it/200x400&text=two" alt="Image" border=3 height=400 width=200></img>
    </td>
  </tr>
</table>

​

Answer 1

在您的代码中，div img不在div的中心

在表格中，图像的垂直对齐是居中

两张图像的中心是不同的，这就是为什么没有正确旋转的原因

检查图像

​