CSS媒体查询，用于将徽标定位在移动设备的中心
CSS媒体查询，用于将徽标定位在移动设备的中心
提问于 2018-06-15 03:47:11
我认为这是相当简单的CSS专家，但我是一个新手的CSS和媒体查询。请帮帮我。
我有垫-工具栏与菜单按钮和应用程序徽标转成，下面的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>当我通过移动设备查看时，徽标应该显示在工具栏的中心和菜单按钮的左侧。
如何通过CSS媒体查询实现？请帮帮我。
这是我尝试过的Stackblitz：https://stackblitz.com/edit/angular-zrdqir
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-15 03:54:16
这里是你需要添加的CSS来实现它。
@media screen and (max-width: 767px) {
.toolbar {
text-align: center;
}
.toolbar .logo {
width: 100%;
}
.toolbar .menuButton {
position: absolute;
left: 10px;
top: 8px;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50864851
复制相关文章
相似问题