html - 用于在移动设备中心定位 Logo 的 CSS 媒体查询

Question

我认为这对于 CSS 专家来说相当简单，但我是 CSS 和媒体查询的新手。请帮助我。

我有带有菜单按钮和应用程序 Logo 的 mat-toolbar，按照 HTML 代码描述，

<div class="toolbar">
    <mat-toolbar style="background-color: black;">
    <div class="logo">
          <img src="/assets/images/Cycle.ico"/>
          <span style="color: orange;">CYC <span style="color: white;">Admin</span></span>
    </div>
    <button class="menuButton" mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
    </mat-toolbar>

当我通过移动设备查看时， Logo 应显示在工具栏的中央和左侧的菜单按钮。

如何通过 CSS 媒体查询使其成为可能？ 请帮助我。

这是我尝试过的 Stackblitz:https://stackblitz.com/edit/angular-zrdqir

Answer 1

这是实现它所需添加的 CSS。

@media screen and (max-width: 767px) {
.toolbar {
  text-align: center;
}
.toolbar .logo {
  width: 100%;
}
.toolbar .menuButton {
  position: absolute;
  left: 10px;
  top: 8px;
}
}