如何在使用CSS的中心制作标题图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (46)

能告诉我如何使用css在中心制作logo吗?实际上我是在用媒体查询来进行移动视图。在桌面我的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

提问于
用户回答回答于

可以使容器宽度达到100%。

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

然后将标题对齐到中心。

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

你可以看到这个例子(https://stackblitz.com/edit/js-95nsut?file=style.css)。

用户回答回答于

假设想要垂直居中,添加margin: auto;应该在flex列布局中执行。

扫码关注云+社区

领取腾讯云代金券