为什么 display:block 会影响 Firefox 中的垂直对齐？

Question

查看下面的代码。这在 Chrome 和 Edge 中看起来不错，但它会将文本与 Firefox 中的底部对齐。另外在不同的浏览器中 check this CodePen 看看我的意思。这是什么原因造成的？

.table {display:table;}
.row {display:table-row;}
.cell{display:table-cell;}
.input input{display:block; margin:10px 0;}

<div class="table">
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
  </div>  
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
   </div> 
</div>

Answer 1

要解决此问题，您可以将 vertical-align: middle; 添加到 .cell class。另外，我会在 .cell 本身内部使用 padding 创建项目周围的垂直间距。这样，所有单元格共享相同的间距。

（请注意，您在 .table 规则中拼错了 display。）

.table {display: table;}
.row {display: table-row;}

.cell {
  display: table-cell;
  padding: 0 0 10px 0;
  vertical-align: middle;
}

.input input {
  display: block;
  padding: 20px;
}

<div class="table">
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
  </div>  
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
   </div> 
</div>

为什么 display:block 会影响 Firefox 中的垂直对齐？

Why does display:block affect vertical alignment in Firefox?

html

css

firefox

vertical-alignment