如何使用css在中心制作标题图像？

Question

你能否告诉我如何使用css在中心制作徽标。实际上我正在使用media查询mobile视图。在桌面我的html工作正常，但在移动视图中 我想在中心显示logo并且并排有两个menu选项（见下图）。

这是我的代码

@media screen and (max-width: 480px) and (min-width:320px) {
    .header{
        background: #00B7FF;
        flex-direction: column;

    }
}

https://stackblitz.com/edit/js-wcvzbw?file=style.css

Answer 1

假设您想要垂直居中，添加margin: auto;应该可以在弹性列布局中完成。

Answer 2

您可以将容器宽度设置为100％。

@media screen and (max-width: 480px) {
  .container {
     width: 100%;
  }
}

然后将标题对齐到中心。

@media screen and (max-width: 480px) {
  .header{
     text-align: center;
  }
}

您可以看到示例here。