html - div 中的垂直对齐 h2

Question

好的，我有以下 HTML 结构

<div class="category">
    <div class="container bottom">
        <h2>Name1</h2>
    </div>
    <div class="container top">
        <h2>Name2</h2>
    </div>
    <div class="container ">
        <h2>Name3</h2>
    </div>
    <div class="container">
        <h2>Name4</h2>
    </div>
    <div class="container">
        <h2>Name5</h2>
    </div>
    <div class="container">
        <h2>Name6</h2>
    </div>
    <div class="container">
        <h2>Name7</h2>
    </div>
</div>

CSS 是这样的:

* {
    margin: 0;
    padding: 0;
}

.category {
    text-align: center;
    width: 95%;
    margin: 0 auto;
}

.container {
    display: inline-block;
    width: 33%;
    height: 4em;
}

h2 {
    display: inline-block;
    width: 100%;
}

.left > * {
    text-align: left;
}

.right > *{
    text-align: right;
}

.top > * {
    vertical-align: top;
}

.bottom > * {
    vertical-align: bottom;
}

主要目标是做这样的事情: Example

为此，假设图片是准确的，并且 .container (灰色框)具有相同的大小(如您在 CSS 中看到的)

我的问题是vertical-align不起作用..我已经研究过这个 CodePen Code无需 display: table-cell 即可工作以及我在 StackOverflow 中找到的其他与表格显示相关的解决方案。为什么它不适用于我的 HTML 和 CSS 代码？我得到了所有<h2>中间对齐:\

Answer 1

在 Codepen 示例中，h2 实际上并不是在框中垂直对齐的。 这是相邻元素的对齐方式，而不是容器中元素的对齐方式。这有点令人困惑。拥有一个内联元素是行不通的，但如果你有两个内联元素，你会看到它们彼此垂直对齐。但是，当使用表格单元格时，此功能会发生变化。

尝试从 Codepen 示例中删除图像，然后在 div 上设置高度。您会看到它不再垂直对齐。

我会与 display:table 和 display:table-cell 保持一致。它将使用 position:absolute 方法工作，但如果文本展开到框外，您将遇到布局问题，因为文本不再位于文档流中。通过将它们设置为表格，您可以保持一定的灵活性。