CSS differences between Firefox and Chrome - vertical height [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm having some trouble getting Firefox and Chrome to display a small section of CSS properly.
I've broken it down as much as possible and created a Codepen to illustrate the problem.
When viewed in Firefox, everything displays as intended (vertically centered). With Chrome, the labels are slightly too high, by one or two pixels.
Everything I've tried so far (adjusting padding, changing floats, adding inline-block, adding margins) will always display incorrectly in one of the two browsers.
What I'd like to know then is what the root cause of the issue is. I use a CSS reset (normalise.css) which is added to the Pen.
Link: Codepen
<div class="editbox">
<div class="object objecthover edit">
<label class="t">Edit</label>
</div>
<div class="object objecthover lock">
<label class="text_label">Lock</label>
<label class="gems index-gems">50 </label>
</div>
</div>
.editbox {
position: absolute;
height: 60px;
width: 192px;
background-color: #516580;
padding-top: 12px;
left: 0px;
}
* {
box-sizing: border-box;
}
.edit, .save {
min-width: 50px;
padding: 7px;
}
.editbox label {
-moz-user-select: none;
color: #FFF;
height: 35px;
}
.editbox .object {
position: relative;
border: 2px solid #FFF;
display: inline-block;
padding: 4px;
margin-left: 4px;
height: 35px;
text-align: center;
}
div.lock {
width: 130px;
height: 35px;
padding: 5px 1px 5px 0px;
}
.lock .text_label {
display: inline-block;
}
.editbox label {
-moz-user-select: none;
color: #FFF;
height: 35px;
}
.lock label.index-gems {
padding: 0px;
}
label.index-gems {
color: #FFF;
height: 27px;
padding: 4px;
}
.editbox .lock::after, .editbox .make_bid::after {
content: "";
position: absolute;
top: 33px;
height: 0px;
width: 0px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #FFF;
}

Answer 1

Trying to vertically align text using padding is unreliable. Two better ways are
use display: table-cell and vertical-align: middle
set the line-height of your element to the same as the height.
The first option handles multi-line text where the second doesn't, but introducing table cells can lead to other layout issues. If you're only ever dealing with a single line of text, the second option is more straightforward.
Here's an example of using line-height to vertically align text:
div {
display:inline-block;
border:1px solid #abc;
}
.a {
line-height: 20px;
height: 20px;
}
.b {
line-height: 30px;
height: 30px;
}
.c {
line-height: 40px;
height: 40px;
}
.d {
line-height: 50px;
height: 50px;
}
.e {
line-height: 60px;
height: 60px;
}
<div class="a">text</div>
<div class="b">text</div>
<div class="c">text</div>
<div class="d">text</div>
<div class="e">text</div>