div旁边的垂直对齐标题[重复]答案

【问题标题】：Vertical-aligning title beside a div [duplicate]div旁边的垂直对齐标题[重复]
【发布时间】：2019-11-04 01:23:59
【问题描述】：

我是 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 描述的技术，但我仍然无法得到这个结果。最好的解决方案是什么？

【问题讨论】：

标签： html css flexbox vertical-alignment

【解决方案1】：

在您的header 上使用align-items: center;

h1 不需要vertical-align: middle; 和 display: inline-block;

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>

【讨论】：