Html CSS媒体查询，用于在移动设备中心定位徽标

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

我有一个带有菜单按钮和应用程序徽标的mat工具栏，如下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>

CYC管理员
菜单

当我通过移动设备查看时，徽标应该显示在工具栏的中心，菜单按钮应该显示在左侧

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

---

以下是我尝试过的Stackblitz：

以下是您需要添加的CSS，以实现这一点

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

---

谢谢，这真的帮了我的忙，我怎样才能减小移动窗口中的图标大小？你能解释一下你的答案吗？要减小图标大小，你需要指定

高度

或

宽度

到

.toolbar.logo img{}

。关于解释我的答案，我将

徽标

元素设置为100%宽度，并将

位置：绝对

分配给

菜单按钮

，将其拉到左侧边缘。谢谢，它开始工作了，我还有一个疑问，如果我想在工具栏上添加3个点，当它是移动设备时，当它在桌面上时，该怎么做？请帮助我你需要有两个图标，一个在手机上显示，另一个在大屏幕上显示。试试这个代码。menumore_vert