CSS菜单布局。如何在图标下方放置文本？

在CSS菜单布局中，可以使用flexbox或grid布局来实现在图标下方放置文本的效果。

使用flexbox布局：

1. 创建一个包含图标和文本的父容器，例如一个div元素，给它设置display: flex;的样式，使其成为一个flex容器。
2. 在父容器中，将图标和文本分别放置在不同的子元素中，可以使用img标签或其他带有图标的元素，以及p或span等标签来包裹文本。
3. 给父容器设置flex-direction: column;的样式，使子元素垂直排列。
4. 如果需要图标和文本的间距，可以给父容器添加justify-content: center;来居中对齐子元素，同时可以通过设置子元素的margin来调整它们之间的间距。

示例代码：

.menu-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.menu-icon {
  /* 图标样式 */
}

.menu-text {
  /* 文本样式 */
}

使用grid布局：

1. 创建一个包含图标和文本的父容器，例如一个div元素，给它设置display: grid;的样式，使其成为一个grid容器。
2. 在父容器中，将图标和文本分别放置在不同的子元素中，可以使用img标签或其他带有图标的元素，以及p或span等标签来包裹文本。
3. 设置grid容器的grid-template-rows属性，可以使用fr单位或auto来设置行高，例如grid-template-rows: 1fr auto;，表示第一行高度为1份，第二行高度根据内容自动调整。
4. 调整子元素的对齐方式和间距，可以使用justify-self和align-self属性来控制子元素的水平和垂直对齐方式，使用grid-column-gap和grid-row-gap属性来调整子元素之间的间距。

示例代码：

.menu-container {
  display: grid;
  grid-template-rows: 1fr auto;
}

.menu-icon {
  /* 图标样式 */
}

.menu-text {
  /* 文本样式 */
}

以上两种方法可以根据实际需求进行调整和扩展，具体样式和效果可以根据项目需求进行个性化定制。另外，关于CSS菜单布局的更多细节和示例，可以参考腾讯云的产品文档：CSS菜单布局。