另一个内联块中的 css 垂直内联 2 个内联块答案

【问题标题】：css vertical inline 2 inline-blocks in another inline-block另一个内联块中的 css 垂直内联 2 个内联块
【发布时间】：2014-07-02 13:58:03
【问题描述】：

看看这个小提琴

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

为什么这在 Firefox 和 chrome 中看起来不同（文本对齐方式不同）
如何使 inner:before 元素中的文本垂直对齐，最好没有行高？

dom 看起来像

<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;
}

【问题讨论】：

您能否更详细地解释一下（草图？）您希望两个文本元素如何相互定位？那里的边框是用于样式或演示的吗？
我刚刚检查了 chrome 和 FF 中的小提琴 - 它们看起来都一样
@Danield 我看到和你一样 Chrome 和 FF 渲染一样。
还有，为什么需要在inner:before上设置height:90px
仔细看——在 FF 中，大文本比 chrome 更靠近顶部边框。最终目标是所有东西都垂直居中。

标签： html css vertical-alignment

【解决方案1】：

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

只需将height: 90px; 替换为line-height: 90px;，所有内容都垂直居中。（除非粗略的大文本是多行文本 - 在这种情况下 line-height 不起作用）

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; /* <--- */
}

【讨论】：

【解决方案2】：

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

通常在 CSS 中，我们使用display: table-cell; 属性使内容垂直居中对齐，或者在现代浏览器中使用 CSS Flex-box，但在这种情况下，显示属性设置为inline-block，除了line-height（您不想使用）或其他一些将内容推送到中间的黑客之外，别无选择。

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

【讨论】：