Vertical-aligning 标题旁边 div

Question

我是 HTML/CSS 的新手，虽然我已经阅读了几篇关于这个主题的文章，但我仍然难以垂直对齐。

考虑以下代码。

header {
    display: flex;
}

header div {
    width: 150px;
    height: 150px;
    background-color: grey;
}

header h1 {
    display: inline-block;
    vertical-align: middle;
    background-color: orange;
    margin: 0;
}

<body>
    <header>
        <div></div>
        <h1>My title here</h1>
    </header>
</body>

我想要实现的是：

我已经尝试了 here 中描述的技术，但我仍然无法获得此结果。什么是最好的解决方案？

Answer 1

在你的 header

上使用 align-items: center;

vertical-align: middle; 和 display: inline-block; 在 h1

上不需要

header {
    display: flex;
    align-items: center;
}

header div {
    width: 150px;
    height: 150px;
    background-color: grey;
}

header h1 {
    background-color: orange;
    margin: 0;
}

<header>
    <div></div>
    <h1>My title here</h1>
</header>

Vertical-aligning 标题旁边 div

Vertical-aligning title beside a div

html

css

vertical-alignment

flexbox