Question

看看这个小提琴

为什么这在firefox vs chrome中看起来不同（文本没有对齐）
如何在内部：在元素之前垂直对齐，最好不使用行高？

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

Answer 1

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

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

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

Answer 2

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

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

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

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

2 个答案: