Html flexbox中文本对齐的媒体查询

我有两个并排的FlexBox，当屏幕尺寸减小时，它们在媒体查询下一个叠在另一个上。左框具有左对齐文本，右框具有右对齐文本。激活媒体查询时，是否可以将两个弹性框中的文本居中对齐？如果可能的话，请张贴代码。谢谢

/*Flexbox容器*/ 标题{ 显示：-webkit flex； 显示器：flex； } /*响应式布局-使菜单和分区内的内容相互重叠，而不是相邻*/ @介质最大宽度：600px{ 标题{ -webkit柔性方向：列； 弯曲方向：立柱； } } /*侧边造型*/ 标志小{ -webkit-flex:1； -ms-flex:1； 弹性：1； 背景：FA8072； 填充：20px； } /*设置内容的样式*/ 横幅购物中心{ -webkit-flex:3； -ms-flex:3； 弹性：3； 背景色：FFA07A； 填充：10px； } /*Flexbox容器*/ 部分{ 显示：-webkit flex； 显示器：flex； } 文本对齐：左对齐 文本对齐：右对齐

---

您需要删除这两个元素上文本对齐的内联样式，并将它们放在CSS文件中。然后您可以简单地添加文本align:center；将样式设置为现有媒体查询

 @media (max-width: 600px) {
    header {
      -webkit-flex-direction: column;
      flex-direction: column;
      text-align:center;
    }
    logosmall, bannersmall {
      text-align:center;
    }
}

logosmall {
  text-align:left;
}

bannersmall {
  text-align:right;
}

---

删除h1上的内联样式这里是更新的代码。希望能有帮助

/*Flexbox容器*/ 标题{ 显示：-webkit flex； 显示器：flex； } /*响应式布局-使菜单和分区内的内容相互重叠，而不是相邻*/ /*侧边造型*/ 标志小{ -webkit-flex:1； -ms-flex:1； 弹性：1； 背景：FA8072； 填充：20px； } 收割台h1{ 字体大小：15px；字体样式：斜体；颜色：555；文本对齐：左侧； } 标题横幅小h1{ 文本对齐：右对齐； } /*设置内容的样式*/ 横幅购物中心{ -webkit-flex:3； -ms-flex:3； 弹性：3； 背景色：FFA07A； 填充：10px； } /*Flexbox容器*/ 部分{ 显示：-webkit flex； 显示器：flex； } @介质最大宽度：600px{ 标题{ -webkit柔性方向：列； 弯曲方向：立柱； } 标题h1，标题横幅小h1{ 文本对齐：居中； } } 测验 文本对齐：左对齐 文本对齐：右对齐

---

应避免使用！重要的是，这是我的错误，一开始我没有看到内联样式。忘了把它拿出来，编辑了我的答案。谢谢，欢迎！对于将来的HTML编码，尽可能避免使用内联样式。