css vertical inline 2 inline-blocks in another inline-block - html

Question

Check out this fiddle
http://jsfiddle.net/9S4zc/2/
How come this looks different in firefox vs chrome (the text is not aligned the same)
How do I ge the text in the inner:before element to be vertically aligned, preferably without line-height?
The dom looks like
<div class="middle">
<div class="inner"> Small text </div>
</div>
The css looks like
.middle {
display: inline-block;
border: 1px solid black;
height: 150px;
vertical-align:middle;
}
.middle:before {
content: '';
height: 100%;
display: inline-block;
vertical-align:middle;
}
.inner {
display:inline-block;
vertical-align: middle;
font-size: 25px;
/* height: 30px; */
text-align:center;
}
.inner:before {
content: "Big Text";
font-size: 50px;
display:inline-block;
margin-right: 20px;
vertical-align: middle;
border: 1px solid red;
height: 90px;
}

Answer 1

The inner:before pseudo element is same as using a DIV element with display: inline-block; property.
Generally in CSS we use display: table-cell; property to have the content aligned vertically center or the CSS Flex-box for modern browsers, but in this case the display property is set to inline-block, which leaves no choice other than line-height(which you don't want to use) or some other hacks to push the content in middle.
As of my understanding, there is no another option for this. I am curious to know if anyone has a better explanation.

Answer 2

Although you prefer not to use line-height it seems to be the best solution here.
Just replace height: 90px; with line-height: 90px; and everything is vertically centered. (Unless of coarse the big text is multi-line text - in which case line-height won't work)
UPDATED FIDDLE
.inner:before {
content: "Big Text";
font-size: 50px;
display:inline-block;
margin-right: 20px;
vertical-align: middle;
border: 1px solid red;
line-height: 90px; /* <--- */
}