如何使用CSS将文本放置在icy图片下方 调整样式后刷新无效果求助

• 语法错误：现有CSS存在两处无效语法，导致部分样式无法被浏览器识别：1. #icy-email img 规则中margin-bottom属性值为空，该条规则整体失效；2. 竖屏媒体查询中存在emphasized text #centre-screen的非法选择器，导致该媒体查询内所有样式不生效。
• 布局冲突：横屏媒体查询中给#centre-screen设置了grid-template-columns: auto auto的两列布局，#icy-email和#text会被分配到同一行的左右两列，默认不会上下排列。
• 浮动干扰：#icy-email img设置了float: left，浮动元素会脱离正常文档流，后续文本元素会默认环绕在图片右侧，无法自然排在图片下方。
• 缓存问题：浏览器会默认缓存静态CSS文件，修改后普通刷新会加载本地旧缓存文件，需按Ctrl+F5（Windows）/Cmd+Shift+R（Mac）强制刷新加载最新样式。

仅需修改对应CSS规则即可，修改后的代码如下：

/* 修正icy图片规则，移除浮动 */
#icy-email img {
  height: 35%;
  width: 50%;
  display: block;
  margin: 0 auto 1rem auto;
}

/* 修正竖屏媒体查询无效选择器，强制单列布局 */
@media (orientation: portrait) {
  #centre-screen {
    grid-gap: 10vh;
    grid-template-columns: 1fr;
  }
  #logo {
    height: 40vw !important;
    width: 40vw !important;
    margin: auto
  }
}

/* 调整横屏grid布局逻辑，保证icy图片和文本上下排列 */
@media (orientation: landscape) {
  #centre-screen {
    grid-gap: 10vw;
    grid-template-columns: auto 1fr;
    grid-template-areas: 
      "logo icy"
      "logo text";
  }
  #logo {
    grid-area: logo;
    height: 40vh !important;
    width: 40vh !important
  }
  #icy-email {
    grid-area: icy;
    text-align: center;
  }
  #text {
    grid-area: text;
    margin: 0 auto;
  }
  #buttons {
    width: 18em !important;
  }
}

1. 移除图片的float: left属性后，图片回归正常文档流，后续的块级元素#text会自动换行排列在图片下方，不会出现文字环绕效果。
2. 修正所有语法错误后，浏览器可以正常识别所有CSS规则，不会出现样式被忽略的情况。
3. 横屏布局调整为双列grid结构，logo单独占满左侧整列高度，右侧分为上下两个区域，分别放置icy图片和文本，既保留了原有的logo居左的布局，也实现了图片在上、文本在下的需求。
4. 竖屏保留单列布局，所有元素自然上下排列，无需额外调整。

内容的提问来源于stack exchange，提问作者Kailau05