Почему display: block влияет на вертикальное выравнивание в Firefox? - PullRequest
Новая
       6

Почему display: block влияет на вертикальное выравнивание в Firefox?

0 голосов
/ 24 января 2019

См. Код ниже.Это выглядит хорошо в Chrome и Edge, но выравнивает текст по низу в Firefox.Также проверьте этот 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>

1 Ответ

0 голосов
/ 25 января 2019

Чтобы исправить это, вы можете добавить 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>
...