ASP.NET中如何用CSS实现Div缩放时菜单文本对齐切换？

这正是CSS的媒体查询（Media Queries）或者容器查询（Container Queries）的典型应用场景——我们可以根据设备视口或容器的尺寸变化，动态切换文本的对齐方式。下面给你两种常用的实现方案：

方案1：基于设备视口的媒体查询 #

如果你的需求是当整个设备屏幕缩小到某个阈值时切换文本对齐，用媒体查询最直接：

首先写好基础的flex菜单样式，默认文本居中：

/* 基础flex菜单容器 */
.menu-container {
  display: flex;
  gap: 1rem; /* 菜单项之间的间距 */
  padding: 0.5rem 1rem;
  background: #f5f5f5;
}

/* 默认菜单项样式，文本居中 */
.menu-item {
  flex: 1; /* 让菜单项均分容器宽度 */
  text-align: center;
  padding: 0.5rem;
  border-radius: 4px;
  transition: text-align 0.2s ease; /* 可选：添加过渡动画让切换更平滑 */
}

然后添加媒体查询，当视口宽度小于指定值（比如768px，你可以根据实际需求调整）时，把文本改成左对齐：

/* 当视口宽度≤768px时，切换文本左对齐 */
@media (max-width: 768px) {
  .menu-item {
    text-align: left;
  }
}

方案2：基于容器尺寸的容器查询 #

如果你的菜单容器可能在不同布局里有不同宽度（比如在侧边栏时宽度变小），想根据容器自身的尺寸来切换样式，可以用CSS容器查询（现代浏览器基本都支持，旧版浏览器需注意兼容性）：

首先要给容器定义查询类型：

.menu-container {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: #f5f5f5;
  container-type: inline-size; /* 告诉浏览器这个容器可以被查询宽度 */
}

.menu-item {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  border-radius: 4px;
}

然后用容器查询，当容器宽度小于某个阈值时修改文本对齐：

/* 当菜单容器宽度≤600px时，切换文本左对齐 */
@container (max-width: 600px) {
  .menu-item {
    text-align: left;
  }
}

小提示 #

• 你可以根据自己的实际布局调整媒体查询/容器查询的阈值（比如把768px改成你需要的尺寸）
• 如果需要兼容较旧的浏览器，优先选择方案1的媒体查询，容器查询在一些旧版浏览器中不支持

内容的提问来源于stack exchange，提问作者Manish K Yadav