Issue
See the code below. This looks alright in Chrome and Edge, but it aligns the text to the bottom in Firefox. Also check this CodePen in different browsers to see what I mean. What is causing this?
.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>Solution
To fix this, you can add vertical-align: middle; to your .cell class. Also, I'd create the vertical spacing around items using padding inside the .cell itself. That way, all cells share the same spacing.
.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>Answered By - mfluehr Answer Checked By - Timothy Miller (PHPFixing Admin)
Posts
