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

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

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>

div旁边的垂直对齐标题

1 个答案: