css垂直内联2内嵌块在另一个内联块中

Question

看看这把小提琴

http://jsfiddle.net/9S4zc/2/

1. 为什么在firefox和chrome中，这看起来不一样(文本不对齐)
2. 我如何在里面的文本:前元素是垂直对齐，最好没有线高度？

这里看起来就像

<div class="middle">
<div class="inner"> Small text </div>
</div>

css看起来像

.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

inner:before伪元素与使用具有display: inline-block;属性的DIV元素相同。

通常，在CSS中，我们使用display: table-cell;属性使内容垂直对齐，或者在现代浏览器中使用CSS Flex，但在本例中，显示属性设置为inline-block，除了line-height(您不想使用)或其他一些将内容推送到中间的黑客之外，没有其他选择。

据我所知，这方面没有其他选择。我很想知道是否有人有更好的解释。

Answer 2

虽然您不喜欢使用line-height，但在这里它似乎是最好的解决方案。

只需将height: 90px;替换为line-height: 90px;，一切都是垂直居中的。(除非粗大的文本是多行文本-在这种情况下，行高不起作用)

更新小提琴

.inner:before {
    content: "Big Text";
    font-size: 50px;  
    display:inline-block;
    margin-right: 20px;
    vertical-align: middle;
    border: 1px solid red;
    line-height: 90px; /* <--- */
}