网站元素分辨率适配求助：expandedButton文本定位错乱

1. 优先用Flexbox布局（最省心的适配方案） #

给你的expandedButton容器添加Flex属性，让文本自动居中且自适应容器：

.expandedButton {
  display: flex;
  justify-content: center; /* 水平居中文本 */
  align-items: center; /* 垂直居中文本 */
  padding: 0.5rem 1rem; /* 留内边距避免文本贴边框 */
  width: auto; /* 按钮宽度随内容自适应，也可设为百分比如width: 100% */
  min-width: fit-content; /* 保证按钮不会窄于文本宽度 */
  box-sizing: border-box; /* 让内边距和边框算入容器总宽高 */
}

Flexbox会自动处理分辨率缩放、页面缩放时的布局变化，文本始终保持在容器内，不会出现错位或溢出。

2. Grid布局（适合复杂场景） #

如果需要更灵活的布局控制，用Grid同样能实现自适应：

.expandedButton {
  display: grid;
  place-items: center; /* 一键实现水平+垂直居中 */
  padding: 0.5rem 1rem;
  width: auto;
  box-sizing: border-box;
}

3. 修复绝对定位导致的错位（如果之前用了绝对定位） #

如果你给按钮文本设置了position: absolute，很容易在缩放时错位，调整成以下写法：

.expandedButton {
  position: relative; /* 把按钮设为文本的定位父容器 */
  padding: 0.5rem 1rem;
  width: auto;
  box-sizing: border-box;
}

.expandedButton .button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 基于文本自身尺寸居中，适配任何容器大小 */
  max-width: calc(100% - 1rem); /* 减去内边距，防止文本超出容器 */
  white-space: nowrap; /* 可选：禁止文本换行；需要换行就删掉这行，加word-wrap: break-word; */
}

4. 处理长文本溢出 #

如果按钮内文本过长，添加以下属性避免溢出：

.expandedButton {
  /* 配合上面的Flex/Grid代码 */
  word-wrap: break-word; /* 自动换行 */
  overflow: hidden; /* 隐藏超出部分（可选） */
  text-overflow: ellipsis; /* 超出显示省略号（可选，需配合white-space: nowrap;） */
}

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