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类中。另外，我会在padding本身内部使用.cell在项目周围创建垂直间距。这样，所有单元共享相同的间距。

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

.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中的垂直对齐？

1 个答案: