要移动标题旁边的图像吗？

Question

我正在尝试使图像和页眉彼此相邻居中。我可以使文本居中，但图像仅停留在左侧或右侧。

https://jsfiddle.net/xcbhpud1/（演示）

我有以下代码：

HTML：

<div class="header">
  <img src="./img/LOGO.png" alt="Logo" class="headerlogo">
  <h1>Header</h1>
</div>

CSS：

.header {
  background-color: white;
  padding: 35px;
  position: relative;
  text-align: center;
  box-shadow: 0 14px 14px -14px gray;
}

.headerlogo {
  float: left;
  overflow: hidden;
  height: 70px;
  padding-top: 35px;
  align-items: center;
}

Answer 1

欢迎使用stackoverflow！

您可以将CSS更改为：

.header {
  background-color: white;
  padding: 35px;
  display:flex;
  align-items:center;
  justify-content:center;
}

这将使标题中的所有项目都居中对齐。

Answer 2

不使用position: relative，而不是使用display