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

看看这把小提琴

这在firefox和chrome中看起来有什么不同（文本没有对齐）

如何将内部：before元素中的文本垂直对齐，最好没有行高

dom看起来像

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

---

internal:before

伪元素与使用带有

display:inline块的DIV元素相同属性

通常在CSS中，我们使用
显示：表格单元格
属性使内容垂直居中对齐，或者对于现代浏览器，将CSS Flex box设置为，但是在这种情况下，display属性设置为
inline block
，除了
行高（您不想使用）或其他一些方法将内容推到中间之外，没有其他选择

据我所知，没有其他选择。我很想知道是否有人有更好的解释
 尽管您不喜欢使用
行高
，但这似乎是最好的解决方案

只需更换高度：90px带
线高：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; /* <--- */
}

.internal:before{
内容：“大文本”；
字体大小：50px；
显示：内联块；
右边距：20px；
垂直对齐：中间对齐；
边框：1px纯红；
线条高度：90px；/*你能更详细地解释一下吗（草图？）您希望两个文本元素如何相对定位？边框框是否用于样式设置或演示？我刚刚查看了chrome和FF中的小提琴-它们看起来都一样same@Danield我看到的和你看到的一样Chrome和FF渲染一样。另外，为什么你需要在内部：beforelook c上设置
height:90px
失败者——在FF中，大文本比在chrome中更接近上边框。最终目标是所有其他内容垂直居中。
.inner:before {
    content: "Big Text";
    font-size: 50px;  
    display:inline-block;
    margin-right: 20px;
    vertical-align: middle;
    border: 1px solid red;
    line-height: 90px; /* <--- */
}