【问题标题】:Why does display:block affect vertical alignment in Firefox?为什么 display:block 会影响 Firefox 中的垂直对齐?
【发布时间】:2019-01-26 03:39:17
【问题描述】:

请参阅下面的代码。这在 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>

【问题讨论】:

    标签: html css firefox vertical-alignment


    【解决方案1】:

    要解决此问题,您可以将 vertical-align: middle; 添加到您的 .cell 类中。另外,我会在 .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>

    【讨论】:

    • 嗨,谢谢。这适用于给定的代码。但是,在我的实际代码中,我只有一个边距底部。在此处查看实时代码:codepen.io/anon/pen/mveZKp align:top 看起来更好,但这实际上并没有在中间对齐。当您向输入添加填充时,这一点非常明显。
    • 将间距应用到.cell 可能会更好,而不是input。请参阅我修改后的答案。
    • 谢谢,在单元格而不是输入字段中添加填充似乎可行!
    猜你喜欢
    • 2012-07-12
    • 2017-02-28
    • 2011-07-27
    • 1970-01-01
    • 1970-01-01
    • 2012-11-19
    • 1970-01-01
    • 1970-01-01
    • 2016-08-03
    相关资源
    最近更新 更多