.button { position: absolute; top: 80%; left: 50px; width: 65%; height: 10%; padding: 10px 20px; background-color: #691515; border: 1px solid #7d2222; border-radius: 4px; transition: all 0.3s ease; } .button:hover { transform: scale(1.1); /* 鼠标悬停时按钮放大 */ } .text_b { align-items: center; font-size: 1vw; transition: all 0.3s ease; } .button:hover .text_b { align-items: center; font-size: 1.5vw; /* 鼠标悬停时文字放大 */ } 该代码为什么div放大后文字布局中了

在给文字设置放大效果时，使用了 `align-items: center;` 属性，但是这个属性是用于 flexbox 布局中的，而不是用于调整文字的布局。这就导致了文字放大后布局错乱的问题。

如果你想要让文字在放大后仍然保持水平居中，可以尝试使用 `text-align: center;` 属性来实现。修改代码如下：

.button {
  position: absolute;
  top: 80%;
  left: 50px;
  width: 65%;
  height: 10%;
  padding: 10px 20px;
  background-color: #691515;
  border: 1px solid #7d2222;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
}

.text_b {
  text-align: center;
  font-size: 1vw;
  transition: all 0.3s ease;
}

.button:hover .text_b {
  font-size: 1.5vw;
}

通过将 `.text_b` 类的样式中的 `align-items: center;` 修改为 `text-align: center;`，可以实现文字放大后保持水平居中的效果。

请注意，这里的 `1vw` 和 `1.5vw` 是相对于视口宽度的单位，你可以根据实际需求来调整这些值。